I've been searching but cannot seem to find a solution.
I have a GeoJSON file which is 170mb in size. It contains about 2500 polygons. Somehow I need to render it to a leaflet map. Evidently at that size I have no chance.
What will the easiest way to render this data? Am I able to create a complete transparent png which can simply be rendered over the world map. The huge size is due to the complexity and the number of polygons. At this point I don't need it to be interactive.
Thanks,
Brian
The easiest way is to create your own map tiles based on that data. There are a couple of ways of achieving this but my suggestion is that you use TileMill. It's free and very easy to use. So, basically you would:
Use TileMill and specify your GeoJSON file as the data-source
Configure how the map should be displayed (like the color of the polygons) with a special CSS-like language inside TileMill
Generate the tiles
Load a new TileLayer in your Leaflet map that references your files
I've actually written a tutorial some time ago that uses a .shp instead of a GeoJson, but should be similar enough:
http://build-failed.blogspot.pt/2012/03/custom-map-tiles-part-2-tilemill.html
I cannot argue with psousa's recommendation. For a straightforward presentation, TileMill is a great idea.
However, if you want to overlay your polygons onto another map, I reckon the only way is by using Mike Bostock's TopoJSON and D3.
The main TopoJSON page:
https://github.com/mbostock/topojson/wiki
An example at the scale you are talking about:
http://bl.ocks.org/mbostock/4206573
You'll have to shop around Mike's excellent examples on github to see how to combine leaflet with a D3 overlay.
I'm currently doing this successfully with hundreds of complex polygons. Haven't had the need to break into the thousands ... yet.
There is also geojson-vt, which apparently can to the tiling serverless on-the-fly - after a bit of loading time.
Just another humble suggestion.
I had successfully done loading 10000+ polygons and querying attributes by rolling out my own Geoserver and PostgreSQL DB + PostGIS instance and producing a WMS (not WFS), as you can see in the image.
But it is not straightforward to implement, especially if the geojson data is the original (and only) data
In that regard I would second psousa's answer to use TileMill.
Related
I would like to use this fork (updated to work with latest Leaflet version) of the Leaflet Zoomify plugin to display a custom map (huge texture ~30000x70000).
I need to work on the map with geo coordinates (to set markers) and wonder what's the best way to do it, since there is no way to set offset, scale or boundaries when initialising it through the plugin.
Initially I thought there should be a way in Leaflet to calibrate a TileLayer just like it's possible with ImageOverlay by setting the image bounds. But that doesn't seem to be the case.
Is this something the plugin should to take care of? In which case I would raise an issue in the repo.
I also saw the conversion methods
in Leaflet. I'm wondering if the best way to go is to convert the geo coordinates to pixels using those methods?
I'm also open to switch to another file format and plugin.
Any advice is highly appreciated.
Thanks a lot!
After all, I went on a totally different route without Zoomify, which I think makes more sense in my case.
I used QGIS to geo-reference my custom layer and export it as GeoTIFF following this tutorial. I uploaded it to Mapbox and baked it into a map style while mixing it with additional map features from Mapbox/OSM.
I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.
I'm planning a website which will use huge schematics, that is, raster images that are not photos. If they were photos and I were interested on displaying them as so, I would use either zoomify, IIPImage or PanoJS. Although all of these solutions offer HTML5 support, they are not entirely satisfactory for my purposes, as they are optimized for JPEGs, use arcane JavaScript or have non-smooth transitions.
So, I was thinking that perhaps I could use leaflet with custom tiles. That is, instead of connecting the javascript to a map server, I could connect it to my own tile-provider with the schematics. My rationale is that leaflet provides smooth rendering, the used tile pieces seem to be png, and that I could even use markers and vector layers. But I came to a stumbling block:
What kind of tiles leaflet expects? Where is information about that? Would the map projection, or other geo-specific aspects that I'm not aware of, be a problem?
Thanks in advance for any help.
Found it!
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
I have a written up HTML file using the Google Maps API v3.
All I want to do is color a couple of countries, for example, color in China and Canada to red. What is a simple solution (that doesn't involve Polygons and thousands of coordinates) to color in countries?
After browsing previous StackOverFlow questions, there seemed to be three common solutions. However these 3 solutions do not seem appropriate for my situation.
Charts API
-I don't really understand if Charts API is a good solution for me because I have already have a file using Google Maps API. Unless Charts can be applied over my map, or synchronize with the map, this does not seem to be a valid solution.
Styling (With Styling Wizard)
-This wizard (as far as I know) deals with the style of general characteristics, like road, water, population, etc. Unless someone can show me how to assign a specific country a color, I do not see how this can work.
Polygons
-I saw the example of the Bermuta triangle and other people have suggested to get the coordinates of the perimeter of a country and create a polygon. This may work except I may need a thousands of coordinates in order to fully outline China. Perhaps there is a more simple method in which I can color in a country?
Use either FusionTablesLayer or KmlLayer.
Both take kml formated geographical data and render it on tiles, yielding better performance with complex or large numbers of polygons.
The Natural Earth data set is available in Fusion Tables, and contains most countries.
This might work for you if coordinates generated automatically in different resolutions depending on your requirements. all you need to do is to load an appropriate GeoJSON onto your map. See here for the complete answer which is done just by adding a couple of line of codes.
I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.
I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.
Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..
I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!
I developed jVectorMap for that purpose.
Why reinvent the wheel. Google Charts already does this.
I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!
We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.
For a drilldown example (loading more detailed map on mouse click) see this demo.
Highmaps is free for non-commercial use.
Do you have country coordinate data stored somewhere?
If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.