Im new on openlayers so i try to make a itinerary using tow point, i can draw a line but not itinerary.
here is my code
var lineFeature = new ol.Feature(
new ol.geom.LineString([ol.proj.transform([4.658166 ,44.199790], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([ 1.425145 , 43.340356 ],'EPSG:4326', 'EPSG:3857')])
);
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var vectorlinenew = new ol.layer.Vector({
source: new ol.source.Vector({
features:[ lineFeature ]
}),
name:'linefeature'
});
map.addLayer(vectorlinenew);
I'm not sure I got your question right, but I believe it draws the line just because you passed just two points to ol.geom.LineString whereas it accepts multiple points and would draw the line over all of them. So all you have to do is just pass an array of all your points to ol.geom.LineString and it will draw the itinerary line.
Related
When loading multiple layers, the attribute color for fillColor is merging with fillColor for another layer. I.e. if one is red and the other is blue, both layers are being displayed on map as purple.
Below is the code that is leading to the issue:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a simple data layer for rendering the data.
var polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
fillColor: 'red',
fillOpacity: 0.2,
});
//Add a simple data layer for rendering the data.
var polygonLayer2 = new atlas.layer.PolygonLayer(datasource, null, {
fillColor: 'blue',
fillOpacity: 0.2,
});
//Add a simple data layer for rendering the data.
var lineLayer = new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'black',
});
map.layers.add([polygonLayer, polygonLayer2, lineLayer]);
//Read a KML file from a URL or pass in a raw KML string.
atlas.io.read(window.location.origin + '/data/TOC_WGS_KML.kml').then(r => {
if (r) {
//Add the feature data to the data source.
datasource.add(r);
}
});
//Read a KML file from a URL or pass in a raw KML string.
atlas.io.read(window.location.origin + '/data/OZLA.kml').then(r => {
if (r) {
//Add the feature data to the data source.
datasource.add(r);
}
});
//Read a KML file from a URL or pass in a raw KML string.
atlas.io.read(window.location.origin + '/data/Test-Parcels.kml').then(r => {
if (r) {
//Add the feature data to the data source.
datasource.add(r);
}
});
});
That is to be expected. You have two polygon layers rendering the exact same data (twice) with semi-transparent colors.
If you want to render data from one of your files differently from another, you can either use a data driven style expression for the fillColor that looks at properties of your shapes to determine which color to use, or you can use two data sources, each with their own polygon layer. That said, if the polygons are semi-transparent and overlap, you will see the colors merge still.
I'm trying to center the map by given bounding box. On OpenLayers FAQ is even an example of it (with the swissProjection) but it just don't work. Looked around in some forums and just can't figure out how to make it work.
Maybe someone knows.
Here is the code:
var extent = [-9022321.0707,3022167.2243,-8849726.2608,3148441.1951];
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
extent: extent,
units: 'm'
});
ol.proj.addProjection(projection);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [0,0],
zoom: 0
})
});
Your code is correct but the center is out of range from your extent. There's two way to fix it.
First, set valid view center and level.
e.g.)
view: new ol.View({
projection: projection,
center: [-8936023.66575, 3085304.2097], // guess it's the center of extent
zoom: 8 // whatever you want.
})
Second, use View.fit instead setting extent on Projection.
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
//extent: extent,
units: 'm'
});
...
map.getView().fit(extent);
I have written my own google map directive in Angular.
I have drawn polygon using the drawing manager. Then from the coordinates drew by the user, got the coordinates and drew the Polygon.
Now I want to add the image in polygon.
How to add the image in polygon area?
bermudaTriangle = new google.maps.Polygon({
paths: polygonsArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
, editable: true
});
Here we need do a trick like following.
Add a polygon
Get the polygon coordinates.
Now draw a icon with the marker in the specified coordinates
Then it will look like an icon inside the polygon
So here, after adds the polygon, I have drawn icon with the help of marker in the center place of the polygon.
var bounds = new google.maps.LatLngBounds();
var i, center;
for (i = 0; i < polygonsCoordinates.length; i++) {
bounds.extend(polygonsCoordinates[i]);
}
center = bounds.getCenter();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: { lat: center.lat(), lng: center.lng() },
map: map,
icon: image
});
I want when map loaded, a straight line between two city drawed e.g. pecan and London.
How I can draw a straight line between two city on Google map with angularjs?
Drawing Simple Polylines, you can save latitude and longitude in arrays like this:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
Then, use google.maps.Polyline draw them out.
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
For more details, please refer to here.
I have the the following Lat Long coordinates (in a JS array), how can we draw the Google Map with markers on these coordinates.
Please give a simple example, as the examples in the API documentation do not really give a conclusive answer or are too complex for me.
43.82846160000000000000, -79.53560419999997000000
43.65162010000000000000, -79.73558579999997000000
43.75846240000000000000, -79.22252100000003000000
43.71773540000000000000, -79.74897190000002000000
Thanks in advance.
You may try this
var map,
locations = [
[43.82846160000000000000, -79.53560419999997000000],
[43.65162010000000000000, -79.73558579999997000000],
[43.75846240000000000000, -79.22252100000003000000],
[43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
DEMO.
I have worked with google maps and if you just need to place a few markers (make sure you are using API v3) v2 is depreciated and will fall off at some point. Next, your lat/long coords. They need to be clipped down to 9 or 10 chars. I have been unlucky when I go with super-long lat/long Coords values.
Google has a nice tool that lets you build a map with. Start here:
https://developers.google.com/maps/documentation/javascript/
Realize you will need a key on your webhosts domain. You can get your key here:
https://developers.google.com/maps/signup
A long list of demos, with 65 v3 API examples.
https://developers.google.com/maps/documentation/javascript/demogallery
In the demos i found this example which looks to be close. Reuse the code you find by viewing the source. You can see the lat/long coord pairs and how it calls it with this link.
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js
Here is a campus map example.
http://beta.gr-3.net/map-api/
Finally, here is the simplest example. A one marker map. Look at the source and reuse it. Hopefully it will be enough to get you started.
https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple
I hope all this is helpful.
First, you would create google maps object, somewhere within head tag you would listen for ready event and in the handler have:
var mapOptions =
{
zoom: 10,
center: new google.maps.LatLng( <%= #drawings.first.latitude %>, <%= #drawings.first.longitude %> ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
This assumes you have a div in your html with id map_canvas.
Than you should be ready to add markers to the page, you should have your coordinates stored in an array, so you can iterate through it and those markers.
for( var i=0; i < coords.length; i++ )
{
latlng = coords[i].latitude + ", " + coords[i].longitude;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '',
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
});
}