New answers tagged

0

According to the official doc you can use bindPopup on a marker to show data when you click on this marker. marker.bindPopup("<b>Hello world!</b><br>I am a popup: " + myData).openPopup(); About shapefile, I found a leaflet's plugin to deal with it. Leaflet Shapefile How to bind popup with shapefile features Hope it will do the job ! ...


0

I've created a simple listener on double click that adds a circle to the map: map.getViewport().addEventListener("dblclick", function(e) { var coordinate = map.getEventCoordinate(e); vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coordinate, dist))); }); The distance dist can be defined elsewhere. Check the following fiddle. It has a ...


0

This problem is looking for a supercover DDA line, or just a DDA (Digital differential analyzer) line. Once the line is found (perimeter), it should be simple enough to find the interior cells as well. A description of the problem and difference can be found here: Bresenheim modified supercover algorithm One useful code solution is shown here: Line Drawing ...


4

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 ...


1

Check out turf.js, which should give you the geospatial capabilities to do what you need in browser. In particular, turf.squareGrid and turf.merge and (edited) the extension turf-overlaps. Something like this might get you most of the way there: var poly = <geoJSONPolygon>; var grid = turf.squareGrid(turf.extent(poly), cellWidth, unit); var ...


5

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 ...


1

[Edit: See Followup Below] When you instantiate your Leaflet map, you just need to pass in a maxBounds option among your map options. When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back when he tries to pan outside the view. To set the restriction dynamically, use setMaxBounds method. ...


0

Figured out! Here's how I solved it. Added a class to each marker using their names: for (var j = 0; j < markers.resources[i].coords.length; j++) { var x = markers.resources[i].coords[j].x; var y = markers.resources[i].coords[j].y; marker = L.marker([y, x], ...


3

Check the proj definition stored in the spatial_ref_sys, it should be different from the one used in the proj4js definition. For example, mine is the following: +proj=utm +zone=30 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs Also epsg.io gives the one with the towgs84 parameters, so I'd change the Proj4js def.


1

If the endpoints of your segments are within 5000 km of each other, then pick some suitable midpoint (e.g., the point halfway between the 2 midpoints), and use this as the center of projection for GeographicLib's gnomonic projection. Map the two line segments into this projection and solve the resulting 2d intersection problem. This will give you a good ...


1

Your bounding box is 100% correct. But, presumably, your map is in EPSG:3857, so you can't use WGS coordinates directly. Transform it to 3857: var ext = ol.extent.boundingExtent([destLoc,currentLoc]); ext = ol.proj.transformExtent(ext, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857')); map.getView().fit(ext,map.getSize());


2

what this error tells you is that you've lost the reference to the L.geoJSON layer you have named geoJson. It is not in scope in the geoJsonBounds function. You need to either pass the geoJson layer to the function or define it in a scope this function has access to. Can you post the full code?


1

What is the size of your geojson? I think you need to register 'layeradd' map event, this event will be called only after the geojson [or any other layer] is properly added to the map. In this event, you can get the layer object and its extent, and then call map.fitBounds(bounds) to zoom to the layer. Here is the basic code: map.on('layeradd', function (e) ...


2

You can use setStyle within the mousemove function: layer.on({ 'mousemove': function (e) { //I want to make the point a red style ? this.setStyle({fillColor:"#ff0000"}); ... } )}


0

I used this code to convert wgs84 to utm and utm to wgs84. Caution: Accuracy of this code is about one meter. <script> function Wgs2Utm( lan1,fi) { var a=6378137.000; var b=6356752.314; var f=(a-b)/a; var e2=Math.sqrt((Math.pow(a,2)-Math.pow(b,2))/Math.pow(b,2)); var e=Math.sqrt((Math.pow(a,2)-Math.pow(b,2))/Math.pow(a,2)); var zone; var lan0; if ...


1

No, OpenLayers.js is the code for the openlayers library itself. Somewhere your application loads a .js file that specifies the various layers and map functionality (it is also possible that this is done inline in an HTML file). Try searching through all the files in your application for the text "new OpenLayers.Map" and whatever file contains that text ...


2

Do you have "win_url" saved as a property on each feature in states geojson? If so, try: function onclick(e) { window.open(e.target.feature.properties.win_url); }


1

It is indeed the sprites. Your Mapbox Studio style probably contains the default sprite set, or none at all if you started with an empty map . If you are using Mapbox Studio, you will use prebuilt sprites provided by Mapbox, or you can upload custom SVG images to build your own sprite. (source) To view or change your sprites you can go to the editor ...


0

I've also found this solution after a few days by accident. I've just put a second GeoJSON and L.grid() object before new OSMBuildings(map).load(). It's not elegant solution but it works, thank you for your answer.


1

In the onClick functions for each, put some code that checks the state of the other check box. If the state of the other checkbox is checked, then perform the code to uncheck and remove the layer and load in the one you want. Apply the same logic for the other check boxes onclick function.


1

I tested a few things in the "Classic 2.5D" version of OSMBuildings which integrates with Leaflet. I was able to achieve what you wanted by starting/loading OSMBuildings quite late. If you want to add circles late or during runtime, you will need to have a FeatureGroup with a dummy circle before calling new OSMBuildings(map).load(), or else they end up on ...


0

Your GeoJSON is not valid, remove the {'geojson': "[]"} wrapper. Not sure if that is the cause of your issue, but try with this GeoJSON instead, and see if that solves it: {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [74.886779, 33.571307]}, "properties": {"rastvalues": 9, "id": 1, "species": ...


2

This may provide a partial answer. Use the map event listener to listen for zoomend to toggle the state of your bootstrap switch. map.on('zoomend', function (e) { // enable/disable based on zoom level if (map.getZoom()>=5) { $("[name='my-checkbox2']").bootstrapSwitch('disabled',false); } else if ...


1

Ideally, you should be using GeoJSON rather than your own arbitrary JSON. Then, take your Polygon geometries and create Multipolygon geometries—perhaps using the union capability of turf.js. This way, simple polygons that are in fact disconnected parts of the same multipolygon are linked. You can also do this upfront, but it's not clear how you are getting ...


0

Can you modify the dataset so that each island has an admin area attribute. Then you can just get the admin area of the polygon you're hovering over; and then change colour to polygons if their admin area attribute matches (within your mouse over event)


2

The basic idea is to listen for the geocoder.input and to create a point based on the result. geocoder.on('geocoder.input', function(ev) { map.getSource('single-point').setData(ev.result.geometry); }); Here's an example demonstrating it: https://www.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/


0

Try to create a new source and add features from both sources to this new source, then pass this source to your layer var featuresToPass = VectorSource.getFeatures().concat(GeoJsonSource.getFeatures()); var mysource = new ol.source.Vector({ //using a collection the features in the source and the collection will stay in sync features: featuresToPass //new ...


1

This is because in your GeoJSON data, you use MultiPoint geometry type. { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "date_rec": "2016\/01\/13", "land_type": "…", "waste_type": "…" }, "geometry": { "type": "MultiPoint", "coordinates": [ [2.35, 48.86] ] } ...


1

Here is code that I found worked for this situation. Essentially, the code (not shown here) grabs the response of a POST method and parses it into javaScript variables. The bellow code injects the desired data into a feature layer. addResponseData = function addResponseData (layer,fieldname,value) { for (feature in layer.graphics) { var ...


0

My first thought is that you are using 'Search' for your own variable in the first call - which will overwrite the esri Search class. The second call fails because of this. Search is no longer the object you think it is. Try using : var mySearch = new Search({ ... Beyond that, I don't what issues my arise by having two Search objects active. Good ...



Top 50 recent answers are included