Hot answers tagged

6

If anyone get stuck with identifying layer type in OpenLayers 3, there is a more sophisticated, JavaScript method to achieve this. As layer objects are created with layer constructors, the native instanceof JavaScript function can be used to check for layer type. As the identification of a layer type usually gets into an if or switch clause, one could ...


6

FYI... I believe this has changed for OL3 V3.5.0, so gcarrillo's answer would be: new ol.layer.Vector({ title: 'added Layer', source: new ol.source.Vector({ url: 'mygeojson.json', format: new ol.format.GeoJSON() }) }) You can see the changes here: ...


6

I think you need to read features using format. data=' your GeoJSON goes here '; var activationLayer = new ol.layer.Vector( { title: 'Activation Boundary', source: new ol.source.GeoJSON(), style: new ol.style.Style( { stroke: new ol.style.Stroke( { color: 'red', width: 2 }) ...


6

This is because boundedBy / bbox is a property that OpenLayers creates when parsing the GML, it is not a real feature property. So when you update, you should clone the feature and get rid of it. Some example code: // do a WFS transaction to update the geometry var properties = feature.getProperties(); // get rid of bbox which is not a real property delete ...


6

Leaflet author here. The vectors should redraw properly. The quote by @nathansnider is referring to the fact that vectors are not reprojected, but they animate with a CSS transform during animation. If they don't redraw, you should set up a JSFiddle test case and file an issue on GitHub. update: they currently redraw, but are not reprojected until the ...


6

The order is important. You can't add something to the map before it is defined. Try in this sequence. First define the termini, metroStops var termini = ... ; var metroStops = ...; Then define the basemap, but don't add it to the map yet var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); var baseMaps = { "OSMBaseLayer": osmBase ...


5

I'm not familiar with programming in JavaScript but in the OpenStreetMap Wiki there is a section describing "Mercator". Following this link you'll find a sample code snippet to tranform from lat long to mercator. I actually don't know if it's correct because I did not test the code.


5

This is a general answer since you didn't provide any code to work with. Note that I assume you have managed to work out the QGIS2LEAF plugin. The output of the plugin gives you a folder with an index.html file, which contain the webpage main code, and few more folders described below. CSS: contains CSS styling files, including own_style.css that is meant ...


5

There are two mode in MapServer in fact and it can be confusing for end users without knowledge about the project history. The first one, the now mostly outdated mode cgi (the url contains mode=browse) way where you don't rely on standards OGC webservices. It was supported in OpenLayers 2 by default because of history (more Mapserver instances not using ...


5

GeoTools is a Java library which can read and write GeoJSON and provides access to features like area via the JTS library. It will also help you to reproject the geometries from the lat/lon of GeoJSON to a suitable projection for calculating areas in m^2.


5

As already pointed out in the comments, the problem is that you are directly opening the HTML file in your browser. This will show up like file:///C:/map.html in your address bar. The OSMGeocoder plugin is calling the URL location.protocol+//nominatim.openstreetmap.org/search (see source code). This works on webservers because the location.protocol is ...


4

I just found this post, from your post here and wanted to share some Python code I wrote that helps select a given feature in a JavaScript app. This code is obviously very specific to the Selenium and Python bindings, but I've got good mileage from it across different browsers, OS and screen resolutions. The idea is that if you Know the real world x/y of ...


4

Since you are a beginner at Node, I'll try to give you a step by step answer Firstly you need to install Node on your system. The exact steps will depend on your Operating system, and version, but it's a good bet that you will find the installer at https://nodejs.org/download/ You should also note that if you have an updated installer, then NPM or the Node ...


4

The following will open a new page when the drawn feature is clicked: map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; layer.on('click', function(){ window.open('http://www.example.com','_blank'); }); drawnItems.addLayer(layer); }); This will bind a popup with a url: ...


4

You can use: map.getViewport().addEventListener('contextmenu', function (e) { e.preventDefault(); console.info('contextmenu'); var feature = map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) { return feature; }); if (feature) { // ... } }); Tested: Firefox && Chrome ...


4

Dashed lines can be done with: new ol.style.Style({ stroke: new ol.style.Stroke({ width: 3, color: 'rgba(255, 255, 255, 1)', lineDash: [.1, 5] //or other combinations }), zIndex: 2 }) I've made you an online example! http://plnkr.co/edit/AW1YNC?p=preview You can use this online "tester" to get various combinations: ...


4

If I understand what you are asking, you have a basemap of the US, and geojson layers for zip codes and county shapes, and you want to toggle (turn on or off) the geojson layers? Leaflet layer control is designed for this Documentation http://leafletjs.com/reference.html#control-layers Example http://leafletjs.com/examples/layers-control.html Leaflet ...


4

I think you need to use IdentityManager from the API that allows you to sign in with your arcgis.com account and then receive access to the data. Whatever users from your organization that have accounts can sign in as well. https://developers.arcgis.com/javascript/jsapi/identitymanager-amd.html And here is a sample that shows what I think you are trying to ...


4

I don't have Maptiler 1.0 Beta 2 to test with, so I'm making a couple of assumptions: You have tiles in the XYZ format and not the TMS format. I'm making this assumption because your screenshot shows "Google Maps Compatible" selected You are using Openlayer 2.x What I would do is to put the the two folders in one main folder such as: Map MAP_1A_1_1 ...


4

I think that graduated sizes are quite a recent QGIS feature (?2.10). I've therefore not implemented them yet in qgis2web. I can have a look at it, though. In answer to your other question, no, I'm not aware that you can directly use an SLD in OpenLayers3. Others might know better. UPDATE I've committed a change to the master branch at ...


4

map.flyTo() should be already available in Leaflet 1.0? However the parameters are different. See https://github.com/Leaflet/Leaflet/blob/master/src/map/anim/Map.FlyTo.js


4

You can do this several ways, I think that the easiest (if you only have a few GIS things to do) is to use Turf see here There are also a couple of GIS library whom are a bit heavier (size wise) leaflet: how to After you can also try openlayers3


3

If you need a modifyend event why dont you use it within the modify interaction.(I guess you use a modify interaction) check this modify.on('modifyend',function(e){ console.log("feature id is",e.features.getArray()[0].getId()); }); This event is available in the latest versions of ol3. In my code snip, I assume you only modify one fetaure at once ...


3

based on srussking answer I wrote the following code assuming the main map object called map and it is a global var, I preferred using find layer by name and not by id, here is my code: function moveLayerBefore(old_idx, new_idx){ if((old_idx === -1) || (new_idx === -1)){ return false; } layer = map.getLayers().removeAt(old_idx); ...


3

Kaarel´s answer should be marked as the correct answer. You need to call the loadFeatures function from the AJAX call. I created three jsfiddle to demonstrate ol 3.5.0 calls via AJAX for ol.format.GeoJSON (JSON and JSONP) as well as ol.format.WFS. WFS http://jsfiddle.net/goldrydigital/9d3jzpna/ JSON http://jsfiddle.net/goldrydigital/ucspgvx0/ JSONP ...


3

I am having the same issue in Google Chrome. Everything works correctly in Mozilla or IE. Here is my CSS definition of the div where the map is loading. .map { height: 35em; width: 100%; border-radius: 5px; border: 0.2em solid #209CA6; } When I go full screen this happens: I realized that reason why this is happening is the fixed setting of the height ...


3

In ol3 version 3.10.0 things have changed. So is more clear than older versions but still more complicated than ol2. So for TILE (ol.layer.Tile) layers your code snip should look like: //declare the layer var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); //asign the listeners on the source of tile layer ...


3

When you define your vector source, put the projection setting pointing to the target coordinate reference system (see the docs): new ol.layer.Vector({ title: 'added Layer', source: new ol.source.GeoJSON({ projection : 'EPSG:3857', url: 'mygeojson.json' }) }) Look at this example (using your sample data): ...


3

The problem is that you are using getMap() in the constructor of your control. But at the moment you instantiate the control, it is not yet added to the map. So, getMap() returns undefined. You can overwrite setMap(map) in your control which is called by the map when executing map.setControl(). ol3_legend.prototype.setMap = function(map) { ...


3

As BradHards already mentioned you'll need to render your own map tiles. On help.openstreetmap.org there is a list of many opportunities: https://help.openstreetmap.org/questions/136/how-do-i-render-my-own-maps-for-my-website. A similar post on gis.stackexchange: How would I draw and visualize custom maps based on OSM data?



Only top voted, non community-wiki answers of a minimum length are eligible