Tag Info

New answers tagged

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 .


0

There is a good answer in Google Groups by Nelson Minar: Use experimental plugin by Ziggy Jonsson and Nelson Minar that renders GeoJSON with D3: https://github.com/NelsonMinar/vector-river-map/blob/master/clients/lib/TileLayer.d3_geoJSON.js Nicklas Aven recommends TKWB binary format that is 80% more effective bandwidth-wise. There is another D3+Leaflet ...


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


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

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


0

You can use the transform set up in proj4leaflet. I expect that you have already crated a CRS in your map.options. var my_crs = map.options.crs; // get the CRS var my_proj = my_crs.projection; // get the projection // transform the lat lon Point to a utm point var my_utm_point = my_proj.project(point_in_latlng); If you want to set the internal coordinate ...


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

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


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


0

Since the popup content is dynamic, you need a map.on listener for the popupopen event. This will bind the overlay to the image in the popup: JSFIDDLE $(document).ready(function () { $("img[rel]").overlay(); $('#test1').fadeOut(); var map = L.map('map').setView([-41.2858, 174.78682], 14); mapLink = '<a ...


5

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


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


0

Perhaps use DOM methods to replace the contents of the div. http://leafletjs.com/examples/choropleth.html look at the info.update function which sets the innerHTML.


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


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


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


0

If it's has transparent png you should see both normally calling addTo(map) on both (in the correct order) BTW you can also add both tileLayers, then set the opacity on the one, but it's not your case probably http://leafletjs.com/reference.html#tilelayer-setopacity


0

Based on the documentation for the leaflet map object, there's an option for layers. So, the following code should work: var map = L.map('map', { center: [-4, 25], zoom: 6, layers:[ L.tileLayer(<base tile url>), L.tileLayer(<overlay tile url>) ] }); You can also initialize a map with no tileset data, and add ...


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


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


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


0

Geoserver is a good way to go. You could use the NETCDF Datastore to create the layer and style the Raster using SLD Raster Symbolizer it so that it overlays your OSM base layer transparantly. To handle the updating of the data without bringing the Layers down for long, you could use the Geoserver REST API via Curl. To make this work, you would have two ...


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

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

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'});


0

The problem is solved. First, I changed echo $datafile to echo '<script type="text/javascript">imageUrl = "'. $datafile. '"; </script>'; This js variable is echoed in the html output page. Then, it was possible to call the js variable, imageUrl. There, was another problem with the image display. I was hiding the image layer div using ...


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.


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.


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


0

Did you look at this? It might be of help. Generally you need to keep reference to features you add to map, so you can change them when needed. You can store them as a L.LayerGroup for example. Than you just iterate over features and set their style to whatever you want. Also, a functional jsfiddle example would be really useful.


2

cartogram.js is a JavaScript implementation of an algoritm to construct continuous area cartograms.



Top 50 recent answers are included