I m working width openlayer 6.
Data comes from here API.
I cant get to work route line from polyline.
code with working polyline example:
var coord = 'on`iJyxatCdT~RsStrAwMbj#sIjp#oWtdA{CfZgAff#iy#jEsTpIyN`VsL_Q';
let icon_url = '//cdn.rawgit.com/openlayers/ol3/master/examples/data/icon.png';
let styles = {
route: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6, color: [40, 40, 40, 0.8]
})
})
};
let vectorSource = new ol.source.Vector();
let vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var route = new ol.format.Polyline({
factor: 1e5
}).readGeometry(coord, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var feature = new ol.Feature({
type: 'route',
geometry: route
});
feature.setStyle(styles.route);
vectorSource.addFeature(feature);
map.addLayer(vectorLayer);
but if i replace coord to here polyline then it does not work - no errors, no lines in map.
here polyline example:
var coord = 'BGo1kkxDkpvxuB_C0IjN_YjhB7G_E_d7L0K_Y4S3X4SrJ8GrOwCnBvCvCzK7B7G7BzF7B_EAzFTjDnBrEvCvC3DT3DUzF8BrEoBrET_E7BrEvC_JnGnGrErEvCzFvCvHjD_nB7QjmBzPoB7aoBnfoB_dU7kBAzZT7VnBvbTzPoBnBoBvCUjDTjDnBvC7BnBnBzP7BjS7B3SjDnarEnfrJnsC7B_OjI_gC7BjN_EjmB_Jn7C3DjcvCrTjDrYjD3X7B7Q3DnfnQ3gE_On0DvH_7BrEvlB3DvgBvCzZvC7avCjcvCjc_EzmC7G7gD7BzZnG_0CnLz2EzFrvC7Bze7Gj9CvC7kBrEz3BvC_djDvlBjDriBvCnajDvb3DnfnG3rB_EzerErY_EnazFvbnG3cvHnfvH3cvHna3Ijc3I7arJ3c_J_dzKvgB_qC7iHvwD71K7Q_xBrEjNrEjNzP3wBvgB7gDjIvWjI7VzFrOnG_O3IrTzFnL_JjS7G7LvHnLjInL3IzKrJnLrJzKzKnL7L7LvM7L_O3NrqC_gC7kBvgBztB3mBjX_T_TjSjN7L3IrJvHjIjIrJrJ7LvHnLvH7L7GvM7G3NzF3N_EjNzF7QzFrT_EjSrEjS7G_dnGjc7GjhBvbjgEriB3';
is here polyline in some other encoded format ?
is it possible to decode here polyline to some other format ?
Related
I had new a polyline using paths,then I try to use polyline.extent to get extent,it return null.
var extent = polyline.extent;
I had found the reason,because i never new a Polyline.
var polyline = {
type: "polyline",
paths: positions
};
var polylineGraphic = new Graphic({
geometry: polyline)}
It should like this:
var polyline = new Polyline({
type: "polyline", // autocasts as new Polyline()
paths: positions
});
I am having issues trying to implement a dynamic marker in my OpenLayer Map widget. I would like that a marker/point is placed on the map "onclick". Instead of placing a new marker/point each mouse click, I would like the marker to be be refreshed on the new position. I have been trying to find some documentation on the layers/vectors and having difficulties understanding how to refresh/replace the layer...
Here is my current OL code for my map that updates two inputs with the latitude and longitude on mouse click:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
map.on('click', function(evt){
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var lon = lonlat[0];
var lat = lonlat[1];
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lon;
});
Thanks in advance!
If your marker is a point feature something like this should do it
map.on('click', function(evt){
myMarker.getGeometry().setCoordinates(evt.coordinates);
});
Currently i am able to display 3 route of 3 drivers respectively(one for each) on a single Gmap.
Now, I wish to show route of 'n' number of drivers (single route for each driver)on Gmap. Its a case of dynamic drivers. I can get data from db for 'n' number of drivers that i need to display on a single map.
My Code is below for single driver please help me for dynamic craetion of routes:
var lat_lng1 = [];
var latlngbounds1 = "";
lat_lng1 = new Array();
var value1 = markers1.length;
//Intialize the Path Array
var path1 = new google.maps.MVCArray();
//Intialize the Direction Service
var service1 = new google.maps.DirectionsService();
var lineSymbol1 = { path1: google.maps.SymbolPath.CIRCLE };
//Set the Path Stroke Color
for (i = 0; i < markers1.length; i++) {
var data1 = markers1[i]
var myLatlng1 = new google.maps.LatLng(data1.lat, data1.lng);
lat_lng1.push(myLatlng1);
var marker1 = new google.maps.Marker({position: myLatlng1,map: map,icon: icon1});
(function (marker1, data1) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker1, "click", function (e) {
if (i == 0){
infoWindow.setContent(data1.Person);infoWindow.open(map, marker1);}
if(i=(markers2.length -1)){
infoWindow.setContent(data1.Person);infoWindow.open(map, marker1);}
else{
infoWindow.setContent(data1.Title);
infoWindow.open(map, marker1);}
});
})(marker1, data1);
}
poly = new google.maps.Polyline({
// path: lineCoordinates,
strokeColor: '#BC456F',
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,strokeColor: '#009900',fillColor: '#009900',fillOpacity: 1},
repeat: '100px',
path1: []
}],
map: map
});
well I solved this issue the very next day by calling ajax loops by driver id
I have a function that creates new layer with one point, which has icon to be shown on the map. When created I want map to zoom and to set center on that point.
The problem is the icon is shown only when I pan or zoom map a little bit (after it was created and map centered). If remove zooming and panning, icon appears on the map perfectly. But when I set center, icon is not visible.
Here you can see it> http://jsfiddle.net/anuket/1orw65g9/4/
function createIcon(){
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(["536433.08", "6586576.42"])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://ol3js.org/en/master/examples/data/icon.png'
}))
});
var VectorSource = new ol.source.Vector({
});
VectorSource.addFeature(newFeature);
var VectorLayer = new ol.layer.Vector({
source: VectorSource,
style: iconStyle
});
map.addLayer(VectorLayer);
var coordinates = newFeature.getGeometry().getCoordinates();
map.getView().setCenter(coordinates);
map.getView().setZoom(2);
}
Your coordinate values need to be numbers, not strings. Remove the quotes:
geometry: new ol.geom.Point([536433.08, 6586576.42])
I want to get the Icon size of the marker, here the below code, It returning the title and icon name is perfectly returning. But the icon size is not returning, Please help how to get the Icon size from the marker.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882,131.044922),
map: map,
title: 'Map',
icon: "travel.png",
size: new google.maps.Size(20, 16)
});
alert("Title"+marker.getTitle());
alert("Icon"+marker.getIcon());
alert("Title"+marker.getIcon().size);
var iconSize = marker.getIcon().size;
var w = iconSize.width;
var h = iconSize.height;
var p1 = projection.fromLatLngToPoint(marker.getPosition());
var p2 = marker.getIcon().anchor;
var sw = new google.maps.Point(p1.x-p2.x-pad,p1.y-p2.y+pad+h);
var ne = new google.maps.Point(p1.x-p2.x+pad+w, p1.y-p2.y-pad);
sw = projection.fromPointToLatLng(sw);
ne = projection.fromPointToLatLng(ne);
iconBounds = new google.maps.LatLngBounds(sw, ne);
Please help!! how to resolve this??
It's because you're not passing an Icon to the marker options, just an URL (which the API supports but then it will only return you a string)
you should create a Icon with the size attribute (else the size property will stay undefined), something like this will work:
var myIcon = {
url: "icon.jpg",
size: new google.maps.Size(10,10)
};
var marker_ new google.maps.Marker({position: Latlng, icon: myIcon});