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])
Related
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 ?
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);
});
I searched for 2 hours now, but it's still not clear if it's possible or not in OL3.
I would like my icons to be fixed size (not to the screen, but to the image map I'm using). I mean, it should cover the same area even if I'm zoomed out, and not covering the half of the map (like I was using a circle polygon, but I have complex Icons so I have to use it as point features). Is there any solution to it?
Like in QGIS: MAP UNITS.
I already have these:
var jelekStyle = function(feature, resolution) {
if(feature.get('tipus')=== 'falu') {
icon = '00_ikonok/falu.png',
size = [115, 233],
scale = 0.05,
anchor = [0.5,46];
} else if(feature.get('tipus')=== 'puszta') {
image = '00_ikonok/puszta.png';
} ...
}
return [new ol.style.Style({
image: new ol.style.Icon({
src: icon,
scale: scale,
size: size,
anchor: anchor,
anchorXUnits: 'fraction',
anchorYUnits: 'pixels'
})
})];
};
...
var jelek = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'sopron_honlap/json/Gorog-Kerekes_Sopron_jelek_GeoJSON.geojson',
format: new ol.format.GeoJSON()
}),
updateWhileAnimating: true,
updateWhileInteracting: true,
style: jelekStyle
});
Yes, there is a solution. In a style function on the layer, you have to scale your icon size by a reference resolution divided by the render resolution.
To update the style even during user interaction, configure your layer with updateWhileInteracting: true and updateWhileAnimating: true. Here is the whole code:
var iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.3.2/examples/data/icon.png'
})
});
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
style: function(feature, resolution) {
iconStyle.getImage().setScale(map.getView().getResolutionForZoom(3) / resolution);
return iconStyle;
}
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
crossOrigin: ''
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.3.2/css/ol.css">
<script src="https://openlayers.org/en/v4.3.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
</body>
I have a map I am developing. The basic Google RED DROPLET icon shows up as my marker image. How can I get my own custom image to come up? I have individual images for just about all 50 of my markers (will be company's logo).
Can someone help? Here's the link.
Any help setting custom markers with the code I have presently would be great.
From actual code:
var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
position: myPosition,
map: map,
icon: image
});
Your code:
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
What you need to do:
var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);
And change CreateMarker:
function createMarker(latlng, html, img) {
// Note here the addition of the img parameter
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
***icon: img,***
zIndex: Math.round(latlng.lat()*-100000)<<5
});
[...]
EDIT
A quick test with your code and my mods.
You can select the image and later associated that image with your lat and long, in this case there is one function that creates the marker.
if(location.category=="TEAMNAME"){
var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
var image='img/redMarker.png';
}
function displayLocation(location){
var content = '<strong><p>Team: ' +location.category + '</strong>';
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
visible: true,
title: location.category,
icon: image
});
/*Content window asociated to created markers*/
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
This is the code for generating map with a kml file
var myLatlng = new google.maps.LatLng(47.711516,-117.395075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
var geoLayer = new google.maps.KmlLayer(
'http://some.kml.url/kmllayer.kml',
{suppressInfoWindows: true,map: map});
geoLayer.setMap(map);
My problem is its always getting at max distance, zoom settings not working even if i try to map.setCenter() call, its still same.
Another question is when i draw polygons on map, is there any way to highlight inside color of it when someone mouse overs it.
2nd question. Draw an initial polygon with a fill opacity of 0 but stroke opacity of 1. Have two event listeners attached to the polygon, for mouseover and mouseout.
google.maps.event.addListener(polygon, 'mouseover', function() {
polygon.setOptions({fillOpacity:0.5});
}
google.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({fillOpacity:0.0});
}