I have used Polymaps in the past but can anyone point me to some really simple script that generates a map from geojson without extra bloat and library dependencies?
I have a country.json file with geojson and want to render the map without d3, openLayers, or other libraries.
It's not a standalone script, but a library, but I've used OpenLayers in the past. Pretty simple to use and works with GeoJson.
The examples on their website are pretty useful too. From their GeoJson example:
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
var featurecollection = {
"type": "FeatureCollection",
"features": [
{"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates":
[[11.0878902207, 45.1602390564],
[15.01953125, 48.1298828125]]
},
{
"type": "Polygon",
"coordinates":
[[[11.0878902207, 45.1602390564],
[14.931640625, 40.9228515625],
[0.8251953125, 41.0986328125],
[7.63671875, 48.96484375],
[11.0878902207, 45.1602390564]]]
},
{
"type":"Point",
"coordinates":[15.87646484375, 44.1748046875]
}
]
},
"type": "Feature",
"properties": {}}
]
};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));
Related
I faced with problem that my layers are duplicating at low zoom scale.
Using mapbox-gl-leaflet, it's combining mapbox map with leaflet. But first of all I'm using mapbox layers so seems the problem is in mapbox.
Here is code example:
var map = L.map('map', {minZoom: 1 }).setView([38.912753, -77.032194], 1);
var gl = L.mapboxGL({
accessToken: "access_token",
style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);
gl._glMap.on('load', () => {
gl._glMap.addLayer({
"id": "line-example",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [[28.2, 60.0], [-10, -13]]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "rgba(13, 12, 39, .7)",
"line-width": 6
}
});
});
And here is the result:
How can I fix this problem with duplicating? I need that my layer appear only in one 'world'.
You can prevent the map from rendering multiple copies of the world (and the layer) by setting renderWorldCopies to false.
Something like this would work:
var gl = L.mapboxGL({
accessToken: "access_token",
style: 'mapbox://styles/mapbox/bright-v8',
renderWorldCopies: false,
}).addTo(map);
For more options, check API spec here: https://docs.mapbox.com/mapbox-gl-js/api/
Try to add in maxBounds [ [-180, -85], [180, 85] ]
I'm writing the app in Ruby on Rails and I have the application set to serve GeoJson from a specific path. What I would like to do have Mapbox grab the GeoJson from the specified path, and add it to the map. Here is my javascript code to create the map
$(document).on 'turbolinks:load', ->
map = new (mapboxgl.Map)(
container: 'map'
style: 'mapbox://styles/mapbox/streets-v9'
zoom: 6
)
map.on 'load', ->
map.addSource 'shapes',
type: 'geojson'
data: '/regions.json'
When I navigate to /regions.json I get the following response.
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.66990129597281, 50.1242808292475],
[8.6629978834745, 50.1232734203388],
[8.66073109130571, 50.1231247844397],
[8.65846429911693, 50.1231743297949],
[8.65887644316587, 50.1218035561855],
[8.65993256224607, 50.1193096384939],
[8.65980376723581, 50.1190949242805],
[8.66297212445633, 50.1181699904754],
[8.66451766457959, 50.1175093125293],
[8.6669905287728, 50.1165843480906],
[8.66910276691314, 50.1158080248614],
[8.67085437906084, 50.1154611529673],
[8.67098317407113, 50.1174597613236],
[8.67077710204663, 50.1200363564073],
[8.67015888599337, 50.1224806902187],
[8.66979825998064, 50.1237358401687],
[8.66990129597281, 50.1242808292475]
]
],
"type": "Polygon"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.69901780003497, 50.1216735191773],
[8.69820854586041, 50.1210834384206],
[8.69762143988481, 50.1207476995652],
[8.69625681516334, 50.1199134291953],
[8.6948921904667, 50.1181736234834],
[8.69597119603273, 50.1173698322427],
[8.69612987332479, 50.1173291335912],
[8.69676458249296, 50.1181736234834],
[8.69744689485361, 50.1188553092786],
[8.69879565183601, 50.1200558666313],
[8.70008093788664, 50.121042742926],
[8.69901780003497, 50.1216735191773]
]
],
"type": "Polygon"
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"coordinates": [
[
[8.67778012178596, 50.105440710563],
[8.67960973428302, 50.103294069223],
[8.67505801538456, 50.1017054926895],
[8.67414320915341, 50.1013763215998],
[8.66892211982668, 50.0993583102266],
[8.66816350002185, 50.1000882390455],
[8.6691229309412, 50.1009755885121],
[8.67238053367137, 50.1029076635563],
[8.67427708321821, 50.1039953159691],
[8.67778012178596, 50.105440710563]
]
],
"type": "Polygon"
}
}]
}
The map loads just fine, but there are no shapes. The frustrating part is that there are no errors in the browser, and that the GeoJson checks out on geojson.io.
What am I doing wrong here?
Ok so it turns out what I actually wanted to do was create a layer and assign the remote GeoJson file as the source:
map.addLayer
id: 'territory-map'
type: 'fill'
source:
type: 'geojson'
data: '/regions.json'
I was able to find an example of this process here
I'm trying to display a GeoJSON polygon on a map. I've used the example provided by OpenLayers with the following data, but only the second polygon is displayed:
var geojsonObject = {
"type": "FeatureCollection",
"crs": {
"type": "name",
},
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[103.92240800000013,21.69931],[100.93664,21.66959500000013],[108.031899,18.67076]]]
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
}
]
};
The code I'm using to parse and add the GeoJSON to the map is as follows:
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
I noticed different kinds of coordinates. In the second set the coordinates are represented like [-5e6, -1e6] with the e which I don't understand and in the first set - that don't work - they look like [103.92240800000013, 21.69931].
Is this a possible reason why my polygon is not displayed?
The problem is your two polygons are specified using different coordinate spaces and you need to determine which map projection you are going to use. By default OpenLayers uses something they call a "spherical mercator" and without delving into the detail the geometry coordinates are represented by pixels on a 2D plane.
Ideally, you would fix your GeoJSON to provide all coordinates in the same projection. If you can't do that, here is a working solution:
The set that you say aren't working look like longitude and latitude (GIS) coordinates and need to be transformed if they are to be displayed on the same layer - in the following example I've tagged the features that require transform using the GeoJSON properties like so:
var geojsonObject = {
type: 'FeatureCollection',
// ...
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [/* ... */],
properties: {
requiresTransform: true // <- custom property
}
}
},
// ...
]
};
Before adding features to the layer source you could then do something like the following:
var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject);
features.forEach(function(feature){
if(!feature.get('requiresTransform'))
return; // ignore
var geometry = feature.getGeometry(),
coords = geometry.getCoordinates();
if(geometry instanceof ol.geom.Polygon)
geometry.setCoordinates(transformPolyCoords(coords));
});
function transformPolyCoords(/* Array */ a){
return a.map(function(aa){
return aa.map(function(coords){
return ol.proj.transform(coords, 'EPSG:4326', 'EPSG:3857');
});
});
}
There may be a cleaner way of managing this and I'd imagine it involves keeping the separate formats in separate GeoJSON objects and I don't know how close it is to what you were expecting, but this is what I came up with using what you provided » working example.
i´m new in google maps and after reading here and there I can´t make this work.
I´m doing a google map where Im showing bike forest routes using geojson ( linestring type, are given by coordinates points).
"type": "Feature",
"properties": {
"name": "larouco",
"color":"red"
},
"geometry": {
"type": "LineString",
"coordinates": [ [ -7.634432, 41.955357, 981.6 ], [ -7.635379, 41.954641, 896.1 ], [ -7.635824, 41.953955, 900.9 ] ................ ] }
All fine at the moment.
I need to pan the map to the center of the road when you clicks it.
map.data.loadGeoJson('http://myroutes.json');
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
strokeColor: color,
strokeWeight: 3
};
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
here is where the problems starts
map.data.addListener('click', function(event) {
var center_rute = getCenter(new google.maps.LatLngBounds());
map.panTo(center_container);
//map.setZoom(13);
});
Thinks that LatLngBounds is the way but i´m running in circles...
Thanks,
Jul
You must access the geometry of the feature and create the LatLngBounds on your own by iterating over the points of the path(geometry)
I am a creating a polyline using a geojson. The format of my geojson is as below:
var myLines = [{
"type": "LineString",
"coordinates": [[-75, 21.9], [-75.4, 22.7], [-76.5, 23.4]]
}, {
"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
L.geoJson(myLines).addTo(map);
I have a clear polyline function as below:
function clear_polyline(){
$.each(myLines, function(ind,poly){
map.removeLayer(poly);
});
}
This function does not clear the layer nor does it throw any error.
How do I clear a polyline in leaflet?
You need to remove the Leaflet layer from the map, not the GeoJSON object that the layer was created from. L.GeoJSON is a FeatureLayer that will contain all of the items in "myLines" so you should do something like this to remove it:
var linesFeatureLayer = L.geoJson(myLines);
linesFeatureLayer.addTo(map);
function clear_polyline() {
map.removeLayer( linesFeatureLayer );
}
var linesFeatureLayer = L.geoJson(myLines);
linesFeatureLayer.clearlayer()