Related
I have layers on Geoserver(2.13.0) that configure with MSSQL DataStore.I install vector tile extension for the same version. After installed, while previewing with TileLayers pbf by selection from drop down result is displaying.
http://localhost:8080/geoserver/gwc/demo/mystate:State?gridSet=EPSG:900913&format=application/x-protobuf;type=mapbox-vector
And also while a request from OpenLayers client same result is coming.
<html>
<head>
<title>Vector tiles</title>
<script src="./js/build-ol.js"></script>
<link rel="stylesheet" href="./css/ol.css">
<style>
html,
body {
font-family: sans-serif;
width: 100%;
}
.map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Mapbox Protobuf - vector tiles</h3>
<div id="map" class="map"></div>
<script>
var gridsetName = 'EPSG:900913';
var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
var style = 'StateStyle';
var format = 'application/x-protobuf;type=mapbox-vector';
var infoFormat = 'text/html';
var layerName = 'myState:State';
var projection = new ol.proj.Projection({
code: 'EPSG:900913',
units: 'm',
axisOrientation: 'neu'
});
var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
params = {
'REQUEST': 'GetTile',
'SERVICE': 'WMTS',
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': gridsetName + ':{z}',
'TILEMATRIXSET': gridsetName,
'FORMAT': format,
'TILECOL': '{x}',
'TILEROW': '{y}'
};
function constructSource() {
var url = baseUrl + '?'
for (var param in params) {
url = url + param + '=' + params[param] + '&';
}
url = url.slice(0, -1);
var source = new ol.source.VectorTile({
url: url,
format: new ol.format.MVT({}),
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
origin: [-2.003750834E7, 2.003750834E7],
resolutions: resolutions,
matrixIds: gridNames
}),
wrapX: true,
});
return source;
}
var layer = new ol.layer.VectorTile({
source: constructSource()
});
var view = new ol.View({
center: [0, 0],
zoom: 2,
projection: projection,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: view
});
map.getView().fit([-13603589.920418553, 6450443.998733485, -12407892.278044553, 7757990.05940472], map.getSize());
</script>
</body>
</html>
But in the same example, I want to apply style for the wmts using GetTile.
I tried according to documentation
Below is the code not working:
<html>
<head>
<title>Vector tiles</title>
<script src="ol.js"></script>
<link rel="stylesheet" href="ol.css">
<style>
html, body {
font-family: sans-serif;
width: 100%;
}
.map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Mapbox Protobuf - vector tiles</h3>
<div id="map" class="map"></div>
<script>
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 1
})
});
function simpleStyle(feature) {
return style_simple;
}
var layer = 'myState:State';
var projection_epsg_no = '900913';
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [new ol.layer.VectorTile({
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1, // oversampling when > 1
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost:8080/geoserver/gwc/service/wtms/1.0.0/' + layer +
'#EPSG%3A'+projection_epsg_no+'#pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
</body>
</html>
Could you suggest me how I can apply my custom styles and getTile from GeoServer with ol.format.MVT()?
I think you are facing a projection problem. I also have faced the same problems. I solved it by changing views.
You can try this:
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([89.5403, 22.8456]), ## change the long/lat values based on your data
zoom: 2
}),
I am new to OpenLayers and have made a simple example where I try to enable drawing of polygons on a map. After drawing I want to be able to multiselect the polygons pressing shift click for further processing. I can not make this work even though some examples on the OpenLayers example page are pretty close...
Here is my code (press Draw button and draw two polygons, press Stop button to exit drawing mode and try to multiselect holding shift key):
<body>
<div>
<img src="stop.png" class="fmsv_map_btn" id="fmsv_stop_elm" title="Stop drawing" alt="Stop drawing">
<img src="draw.png" class="fmsv_map_btn" id="fmsv_contour_elm" title="Contour" alt="Contour">
</div>
<div width="600" height="600" id="map" class="map"></div>
<script>
var engine = this;
var draw = null;
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'osm' })
})
],
view: new ol.View({
center: [0,0],
zoom: 2
})
});
var features = new ol.Collection();
var source = new ol.source.Vector({ features: features });
var featureOverlay = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 1
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#000000'
})
})
})
});
featureOverlay.setMap(map);
$("#fmsv_contour_elm").click(function () {
addInteraction("Polygon");
});
$("#fmsv_stop_elm").click(function () {
if (draw)
map.removeInteraction(draw);
draw = null;
});
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
//addCondition: ol.events.condition.shiftKeyOnly,
//toggleCondition: ol.events.condition.never,
//removeCondition: ol.events.condition.altKeyOnly,
});
map.addInteraction(selectClick);
var selectedFeatures = select.getFeatures();
//selectClick.on('select', function (e) {
//});
function addInteraction(drawmode) {
if (draw)
map.removeInteraction(draw);
draw = new ol.interaction.Draw({
features: features,
type: /** #type {ol.geom.GeometryType} */ (drawmode)
});
map.addInteraction(draw);
}
</script>
</body>
Use map.addLayer(featureOverlay); instead of featureOverlay.setMap(map)
I am trying to add direction service to the map
1:I need to display the map
2:once i get the response from the server or invoke the method only then i should draw the poly line i am trying to do it as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var map;
var vectorLayer;
var extentToZoom;
var geojsonObject;
/* function addGeoObject(){
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}}
//console.log(geojsonObject.coordinates);
}*/
function drawPolyline(geoObject){
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
geojsonObject =geoObject;
var routeGeom = new ol.format.Polyline(
{
factor: 1e6
}).readGeometry(geojsonObject.route_geometry, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var routeFeature = new ol.Feature({
geometry:routeGeom
})
extentToZoom = routeGeom.getExtent();
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
map = new ol.Map({
layers: [
new ol.layer.Vector({
source: vectorSource,
style: styleFunction
})
],
target: 'laneMap'
});
}
function initMap(){
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
}
initMap();
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}};
drawPolyline(geojsonObject);
/* var geoobject2={"status":200,"hint_data":{"locations":["UiQkCf____-ljiMAEAAAABgAAAAAAAAAAAAAAP____-jqAAAt5gUAG2wMgYAAAEB","c8gaCf____8AAAAAMgAAALAAAAAAAAAAHQEAAOviEAajqAAAdqQUABy3MgYAAAEB"],"checksum":4089551480},"route_name":["East Coast Parkway (ECP)",""],"status_message":"Found route between points","route_geometry":"mjkqAyewieEsHuB_m#qWoYwJuDoDoAqBoFaJkCsD}H_Hai#{Pw`#iM","via_indices":[0,10],"route_instructions":[["10","East Coast Parkway (ECP)",18,0,2,"18m","N",21,1,"S",201],["1","",308,1,24,"307m","NE",28,1,"SW",208],["1","",65,9,5,"65m","NE",23,1,"SW",203],["15","",0,10,0,"0m","N",0,"N",0]],"via_points":[[1.349815,103.985261],[1.352822,103.986972]],"found_alternative":false,"route_summary":{"total_distance":391,"total_time":29,"end_point":"","start_point":"East Coast Parkway (ECP)"}};
drawPolyline(geoobject2);*/
initMap();
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
In the above code initMap method will draw the plain map
once i invoke the drawPolyline method it should show the plot (this is because i will get the data from the zmq once i get the data i should plot it )
I tried for a long time doing it please help by posting the correct code to accomplish it or suggest a way to do it
Assuming your routing service responds to a simple AJAX GET request, you can save yourself a lot of effort using OpenLayers's built-in layer loading. Something like
function drawPolyline(url) {
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.Polyline(),
url: url
}),
style: styleFunction
}));
}
The url argument in the above function is the url you use to get the track from your routing service.
I am drawing the polylines on the map and displaying few marker as well which is working fine but when the polyline is drawn marker is above the line
I wanted to know like can the shown the marker upfront when i draw the polyline
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var map;
var vectorLayer;
var extentToZoom;
var geojsonObject;
function drawPolyline(geoObject){
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'greenRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'redRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.get("fName")];
};
geojsonObject =geoObject;
var routeGeom = new ol.format.Polyline(
{
factor: 1e6
}).readGeometry(geojsonObject.route_geometry, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var colourRoute=["greenRoute","redRoute"]
var routeFeature = new ol.Feature({
geometry:routeGeom,
fName: colourRoute[Math.floor(Math.random()*colourRoute.length)]
})
console.log("color route"+colourRoute[Math.floor(Math.random()*colourRoute.length)]);
extentToZoom = routeGeom.getExtent();
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
map.addLayer(vectorLayer);
}
function initMap(){
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : [" http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"," http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"," http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"]
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
}
function invokeAddMarker(){
var markerData = [
{
"title": 'point1',
"lat": 1.350664,
"lng": 103.985190,
"description": 'yyyy'
}, {
"title": 'point2',
"lat":1.353604,
"lng": 103.986395,
"description": 'zzz'
}, {
"title": 'point3',
"lat": 1.357227,
"lng": 103.9879999,
"description": 'uuu'
}
];
for(var i=0;i<markerData.length;i++){
addmarker(markerData[i].lat,markerData[i].lng);
}
}
function addmarker(lat,lng){
console.log("*****lat******"+lat);
console.log("*****lng******"+lng);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lng,lat],'EPSG:4326', 'EPSG:3857')),
name: 'camera'
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'camera.png'
}))
});
iconFeature.setStyle(iconStyle);
vectorSource = new ol.source.Vector({
features: [iconFeature]
});
/*t clear the markers*/
/*vectorSource.clear();*/
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
alert("video comes here");
}
});
}
initMap();
invokeAddMarker();
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}};
drawPolyline(geojsonObject);
var geoobject2={"status":200,"hint_data":{"locations":["UiQkCf____-ljiMAEAAAABgAAAAAAAAAAAAAAP____-jqAAAt5gUAG2wMgYAAAEB","c8gaCf____8AAAAAMgAAALAAAAAAAAAAHQEAAOviEAajqAAAdqQUABy3MgYAAAEB"],"checksum":4089551480},"route_name":["East Coast Parkway (ECP)",""],"status_message":"Found route between points","route_geometry":"mjkqAyewieEsHuB_m#qWoYwJuDoDoAqBoFaJkCsD}H_Hai#{Pw`#iM","via_indices":[0,10],"route_instructions":[["10","East Coast Parkway (ECP)",18,0,2,"18m","N",21,1,"S",201],["1","",308,1,24,"307m","NE",28,1,"SW",208],["1","",65,9,5,"65m","NE",23,1,"SW",203],["15","",0,10,0,"0m","N",0,"N",0]],"via_points":[[1.349815,103.985261],[1.352822,103.986972]],"found_alternative":false,"route_summary":{"total_distance":391,"total_time":29,"end_point":"","start_point":"East Coast Parkway (ECP)"}};
drawPolyline(geoobject2);
var geoobject3={"status":200,"hint_data":{"locations":["NksUCf_____CwU8AzwAAABMBAAAAAAAAHQEAAG0BpwavqAAARaEUAOmxMgYAAAEB","R0sUCf_____CwU8AZgAAAPQAAADtAAAAKwIAAKQJ8QSvqAAAebIUAGy5MgYBAAEB"],"checksum":3361836982},"route_name":["T3 Departure Drive","T3 Departure Drive"],"status_message":"Found route between points","route_geometry":"isoqAq}wieEqUiHqpA__#cLkE}NgJyGaDiTmGemAk`#w`#kM","via_indices":[0,8],"route_instructions":[["10","T3 Departure Drive",535,0,81,"535m","N",22,1,"S",202],["15","",0,8,0,"0m","N",0,"N",0]],"via_points":[[1.352005,103.985641],[1.356409,103.987564]],"found_alternative":false,"route_summary":{"total_distance":535,"total_time":84,"end_point":"T3 Departure Drive","start_point":"T3 Departure Drive"}};
drawPolyline(geoobject3);
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
Here drawpoline() method will draw the lines using osrm service and invokeAddMarker() method has a array for which addmarker() method is invoke
i wanted shown something like above
All ol.style.Style settings have a zIndex parameter. You can use this to set the order of different styles.
http://openlayers.org/en/v3.12.1/apidoc/ol.style.Style.html
I am new to openlayers and a beginner to javascript, but I have tried for 3 days and nights now. My code seems okay but there is something I am missing out and just can’t figure it out
I have this problem, I can’t find my geometric points on my map.
My code goes thus:
//html
<!doctype html>
<head>
<title> Me OpenStreetMap </title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>
<div id="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// style for geometric layer
var meStyle = new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: '#ff9900',
opacity: 1
}),
stroke: new ol.style.Stroke({
color: '#ffcc00',
opacity: 1
})
});
// geometric layer
var geoLayer = new ol.layer.Vector({
source : new ol.source.Vector({
projection : 'EPSG:3857',
url : '../data/json.json',
format: new ol.format.GeoJSON(),
style: meStyle
})
});
// create layer
var osmLayer = new ol.layer.Tile({
source : new ol.source.OSM()
});
// create view
var yaounde = new ol.proj.transform([11.5653, 3.86617],
'EPSG:4326', 'EPSG:3857'
);
var view = new ol.View({
center: yaounde,
zoom: 15
});
// create map
var map = new ol.Map({
target: 'map'
});
map.addLayer(osmLayer, geoLayer);
map.setView(view);
</script>
</body>
</html>
//geojson
{"type":"FeatureCollection",
"features":
[
{"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
{"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
{"type":"Feature","properties":{"Name":"2","Description":""},"geometry":{"type":"Point","coordinates":[11.5072,3.8759,0.0]}},
{"type":"Feature","properties":{"Name":"3","Description":""},"geometry":{"type":"Point","coordinates":[11.5032,3.87556,0.0]}},
{"type":"Feature","properties":{"Name":"4","Description":""},"geometry":{"type":"Point","coordinates":[11.50291,3.87552,0.0]}},
{"type":"Feature","properties":{"Name":"5","Description":""},"geometry":{"type":"Point","coordinates":[11.50278,3.87573,0.0]}},
{"type":"Feature","properties":{"Name":"6","Description":""},"geometry":{"type":"Point","coordinates":[11.50316,3.87621,0.0]}},
{"type":"Feature","properties":{"Name":"7","Description":""},"geometry":{"type":"Point","coordinates":[11.50347,3.87611,0.0]}},
{"type":"Feature","properties":{"Name":"8","Description":""},"geometry":{"type":"Point","coordinates":[11.50314,3.8763,0.0]}},
{"type":"Feature","properties":{"Name":"9","Description":""},"geometry":{"type":"Point","coordinates":[11.50325,3.87652,0.0]}},
{"type":"Feature","properties":{"Name":"10","Description":""},"geometry":{"type":"Point","coordinates":[11.50356,3.87558,0.0]}},
{"type":"Feature","properties":{"Name":"11","Description":""},"geometry":{"type":"Point","coordinates":[11.5033,3.87564,0.0]}},
{"type":"Feature","properties":{"Name":"12","Description":""},"geometry":{"type":"Point","coordinates":[11.50397,3.87586,0.0]}},
{"type":"Feature","properties":{"Name":"13","Description":""},"geometry":{"type":"Point","coordinates":[11.50299,3.87641,0.0]}},
{"type":"Feature","properties":{"Name":"14","Description":""},"geometry":{"type":"Point","coordinates":[11.50279,3.8771,0.0]}},
{"type":"Feature","properties":{"Name":"15","Description":""},"geometry":{"type":"Point","coordinates":[11.50269,3.87723,0.0]}},
{"type":"Feature","properties":{"Name":"16","Description":""},"geometry":{"type":"Point","coordinates":[11.50258,3.87722,0.0]}},
{"type":"Feature","properties":{"Name":"17","Description":""},"geometry":{"type":"Point","coordinates":[11.49122,3.8738,0.0]}},
{"type":"Feature","properties":{"Name":"18","Description":""},"geometry":{"type":"Point","coordinates":[11.48567,3.87447,0.0]}},
{"type":"Feature","properties":{"Name":"19","Description":""},"geometry":{"type":"Point","coordinates":[11.48548,3.88107,0.0]}},
{"type":"Feature","properties":{"Name":"20","Description":""},"geometry":{"type":"Point","coordinates":[11.48526,3.8812,0.0]}},
{"type":"Feature","properties":{"Name":"21","Description":""},"geometry":{"type":"Point","coordinates":[11.48614,3.88044,0.0]}},
{"type":"Feature","properties":{"Name":"22","Description":""},"geometry":{"type":"Point","coordinates":[11.48638,3.88033,0.0]}},
{"type":"Feature","properties":{"Name":"23","Description":""},"geometry":{"type":"Point","coordinates":[11.48641,3.88053,0.0]}},
{"type":"Feature","properties":{"Name":"24","Description":""},"geometry":{"type":"Point","coordinates":[11.4868,3.88029,0.0]}},
{"type":"Feature","properties":{"Name":"25","Description":""},"geometry":{"type":"Point","coordinates":[11.48772,3.87994,0.0]}},
{"type":"Feature","properties":{"Name":"26","Description":""},"geometry":{"type":"Point","coordinates":[11.4887,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"27","Description":""},"geometry":{"type":"Point","coordinates":[11.48869,3.88057,0.0]}},
{"type":"Feature","properties":{"Name":"28","Description":""},"geometry":{"type":"Point","coordinates":[11.48868,3.8807,0.0]}},
{"type":"Feature","properties":{"Name":"29","Description":""},"geometry":{"type":"Point","coordinates":[11.4888,3.88071,0.0]}},
{"type":"Feature","properties":{"Name":"30","Description":""},"geometry":{"type":"Point","coordinates":[11.49206,3.8775,0.0]}},
{"type":"Feature","properties":{"Name":"31","Description":""},"geometry":{"type":"Point","coordinates":[11.49251,3.87748,0.0]}},
{"type":"Feature","properties":{"Name":"32","Description":""},"geometry":{"type":"Point","coordinates":[11.4923,3.87783,0.0]}},
{"type":"Feature","properties":{"Name":"33","Description":""},"geometry":{"type":"Point","coordinates":[11.49273,3.87822,0.0]}}
]
}
The OpenStreet map appears by I can’t find the points
It is very simple to solve:
map.addLayer(osmLayer);
map.addLayer(geoLayer);
The addLayer method accepts a layer, only one. A working demo with your code.