Tag Info

Hot answers tagged

5

You can use Mapshaper for this, and then dissolve from the command line: mapshaper --dissolve -i your_data.geojson


3

If this is typical raster data (or can be converted into typical raster data), I can think of a couple of options: Use a map server (like MapServer, GeoServer) to host the raster data, and pull this into Leaflet via WMS Assuming you can symbolize this the way you want it to look in a GIS (e.g. QGIS), and export as an image, you could then use a tool such ...


3

In your code, myLines is not a geojson structure ... Try with this syntax { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [[42.438917, -71.116146],[42.443904, -71.122044]] } }, { "type": "Feature", ...


3

I use Leaflet with SVGs as the maps. I do this because I want the map functionality on top of a floor plan. In my experience, it works much better than Raphael.js (maybe just because it's newer?), which my company used for the same purpose on a previous project. I have also made map tiles out of floor plans, but the SVGs are faster and smoother when zooming ...


3

OverlappingMarkerSpiderfier is a plugin designed for the L.Marker class in Leaflet. Thus, it only accepts an L.Marker object and can't handle L.circleMarker properly, since it's based on the L.Circle objects which is based on L.Path. Credit for pointing this out goes to @FranceImage. You can't use the L.circleMarker layer with the spiderfier plugin, it will ...


2

No - I don't think it is. There are two fixes that come to mind: 1 - copy the layer and add a new FeatureTemplate to the new layer. 2 - return all the data that any of your popups need and write some JavaScript to set up the pop up with the content you need.


2

You have missed out two parts from your code. To add the GeoJSON layer, you have to call the addTo() method within the L.geoJson object. var geojsonLayer = new L.geoJson().addTo(map); The second part is the most vital. Even though you have defined a custom projection with L.Proj.CRS, your map will be in the Leaflet-native WGS 84 projection (EPSG:4326). ...


2

It's easy to do with QGis. Open QGis Drag&Drop the geojson file to qgis use the "dissolve" tool in the vector menu (it's inside a submenu). use the "dissolve all" option from the dropdown this will create a shapefile (check the box to output to the map) which you can then again save as a geojson file by right-clicking it in the layer pane and choosing ...


2

a couple things here... that constructor option expects an array at a minimum, you have to include the OBJECTID field in that array in order for everything to work on the clientside as it should. { fields: ["OBJECTID", "CITY"] } we should probably be handling that for people. i'll look into it. http://codepen.io/anon/pen/pjEtD


2

What you are encountering is just the initial learning curve. And with GeoServer (which the OpenGeo Suite uses) the learning curve is pretty nice. I'll try to list some concepts for you, and then if you can send me a URL or IP for your server, I can send you an example that uses your layers. For a deep dive in, check out my source code here: ...


1

You prepare an empty table with an id <table id="properties"></table> And you populate it with innerHTML property for (var prop in properties) { if (properties.hasOwnProperty(prop)) { document.getElementById("properties").innerHTML = document.getElementById("properties").innerHTML + "<tr><td>" + prop + ...


1

You can save your marker positions , your current map view coordinates etc.. into the localstorage of the browser . Localstorage is supported by nearly all modern browsers , you can check availability of local storage here .


1

You could do this using Javascript Topology Suite which will work with Node.js. Start with an empty MultiPolygon (or the first geometry in your collection) and union this with each (Multi)Polygon in your collection. You can only have one format for the whole collection, obviously, as properties are one to one with the geometry in the GeoJSON. Here are some ...


1

I have a similar situation - point data stored in PostGIS database and I need display heatmap of this points in web. I write shell script (put in cron for automatically update raster if changes values in points) which make next: convert data from PostGIS table in local csv file (x,y,value) using gdal_grid command I receive TIFF raster from values of csv ...


1

Found the solution. The problem highlightFeature function with display whole info.update(layer.feature.properties) aka info0, info1, info2... so I need to write a specific highlightFeature for each layer like that : function highlightFeature0(e) { var layer = e.target; layer.setStyle({ weight: 3, color: '#666', dashArray: '', fillOpacity: 0.5, ...


1

The docs are great, look at the LayerGroup part. There is a method eachLayer that does exactly what you want: featureLayer.eachLayer(function (layer) { // do something with marker layer // layer.feature is probably defined, to create marker, do something like this layer.bindPopup(createPopupContentFromFeature(layer.feature)); }); You can do similar ...


1

You mean it expands when hovering (not pressed) ... There is no documentation but you can read the code here: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js Note in line 70 if (!L.Browser.android) { L.DomEvent.on(container, { mouseenter: this._expand, mouseleave: ...


1

From the Leaflet Polygon examples, here is one way with a Switch Statement: var states = [{ "type": "Feature", "properties": {"party": "Republican"}, "geometry": { "type": "Polygon", "coordinates": [[ [-104.05, 48.99], [-97.22, 48.98], [-96.58, 45.94], [-104.03, 45.94], [-104.05, 48.99] ]] } }, { "type": ...


1

Just a little CSS workaround will do the job for you. You can see the result in the following fiddle: http://jsfiddle.net/GFarkas/kkwgc1nh/ I made all of the images irresponsible to pointer events, so the clicks will fall through them and will activate the popup contents of the GeoJSON layer. The CSS code is: img.leaflet-tile{ pointer-events: none; } ...


1

Here is a working code for your problem: http://jsfiddle.net/GFarkas/rkhzfguz/1/ Some explanations on the wrong lines: var crs = L.CRS.proj4js('EPSG:3301', '+proj=lcc +lat_1=59.33333333333334 +lat_2=58 +lat_0=57.51755393055556 +lon_0=24 +x_0=500000 +y_0=6375000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', new L.Transformation(1, -40500, -1, ...


1

Until somebody finds a better solution, here what I would do ... As you noticed, leaflet is using pixel position to set zIndex (in Marker.js) pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round(); this._zIndex = pos.y + this.options.zIndexOffset; What I suggest is to undo leaflet zIndex using setZIndexOffset() Say you want ...


1

Looking into the plugin there appears you can also pass in options when creating the key. One of the options is called "type" and is set to Aerial by default. That is Bing Maps without labels. To get labels you need to change this to AerialWithLabels. For example: baseMapUrl = new L.BingLayer(bing_key, {type: 'AerialWithLabels'});


1

I can tell you the answer for the second question: How to show UTM-coordinates in the lower right corner. In leaflet the internal coordinate system is always longitude/latitude as far as I know, and you have to transform every time you need to work with your data. First make sure you have installed proj4.js and proj4leaflet.js. To show your coordinates you ...


1

So that was simple. Searching for mapbox.js, I saw that a newer version is out. Using the latest css/.js: <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.css' rel='stylesheet' /> Shows a retina projection.


1

If you want to remove the grayscale map from the start just delete: "Grayscale": grayscale, From var baseMaps = { "Grayscale": grayscale, "Streets": streets }; If you want to remove the layer on a click you call it as a method on the map object. Like so: map.removeLayer(grayscale) To remove it from the control you first have to assign ...


1

Check out a tutorial I wrote on my blog: http://dillonshook.com/leaflet-zip-code-map-part-1/ Doing this dynamically requires some back-end setup to serve up the geoJSON with data joined


1

I ended up writing a Leaflet plugin, Leaflet.draw.topology, to accomplish this task. The only thing not implemented in the plugin is geometry validation, though in the future it certainly could be. It is currently handled server side with PostGIS.



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