I am using openlayers3 and i want to bring my features from feature.json, it seems when my map is loded I can get the feature file from network as xhr request but i am not able to see my polygons on map. Here below is my code
function showMap() {
var vector = new ol.layer.Vector({
projection: 'EPSG:5650',
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
projection: 'EPSG:5650',
url: 'feature.json'
})
});
var map = new ol.Map({
target: 'tilemap',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
layers: [
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://www.geodaten-mv.de/dienste/adv_dop',
crossOrigin: null,
projection: 'EPSG:5650',
params: {
VERSION: '1.3.0',
LAYERS: 'mv_dop',
FORMAT: 'image/jpeg',
CRS: 'EPSG:5650'
}
})
}),vector
],
view: new ol.View({
projection: 'EPSG:5650',
center: [33355494, 5983295],
zoom: 10
})
});
DisplayTilesServices.setMap(map);
}
I was using olderversion of openlayers and now instead of Using url in source, now I am using features and it works!! see the code below
$http.get('feature.geojson').then(function(res){
var format = new ol.format.GeoJSON();
source=new ol.source.Vector({
projection: 'EPSG:5650',
features:format.readFeatures(res.data)
});
var vectorLayer = new ol.layer.Vector({
source: source
});
map.addLayer(vectorLayer);
},function(){})
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 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 load some features from .json file, and would like to automatically set view wuth zoom to see all loaded features. I user OpenLayers version 3.
Here's what I have:
var gjsonFile = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'map.json',
projection: 'EPSG:3857'
})
})
});
var map = new ol.Map({
view: new ol.View({
center: ol.proj.transform([-77.0087,38.8691], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
gjsonFile
],
target: 'map1'
});
Vector sources have a #getExtent() method that gives you the extent of all features currently loaded in the source. To set the map's view to that extent as soon as the file is loaded, add the following code:
var source = gjsonFile.getSource();
var onChangeKey = source.on('change', function() {
if (source.getState() == 'ready') {
source.unByKey(onChangeKey);
map.getView().fitExtent(source.getExtent(), map.getSize());
}
});
I have created a map with OpenLayers 3 using static image. It uses fake projection so the map can use to properly display the layer as it's measured in pixels. This is the code:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 1389, 1070]
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
imageSize: [1389, 1070],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 2
})
});
I was trying to add marker overlays to add some more interactions however I'm struggling to specify position and the markers is outside the map rather then inside where I want to place it.
var marker = new ol.Overlay({
position: [200, 200],
element: document.getElementById('marker'),
stopEvent: false
});
I'm very novice to this so if anyone have an idea how to set position correctly I will be thankful.
Using this OpenLayers 3 map as an example, I was able to add a marker to the center of your static image with the following:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([700, 700])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://ol3js.org/en/master/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});