I'm trying to show a map with three layers (google maps layers, wms layer and points layer) this is my code:
var map = new OpenLayers.Map({
div: "map",
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
});
var capaGoogle = new OpenLayers.Layer.Google(
"Google Satellite",
{ type: G_SATELLITE_MAP, sphericalMercator: true, transparent: true }
);
var wmsOverlay = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://localhost:1979/geoserver/wms",
{ layers: 'world:PYCIUDADES', transparent: true }, { isBaseLayer: false });
var vectorLayer = new OpenLayers.Layer.Vector("vector");
vectorLayer.addFeatures([
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-57.635021, -25.276987)
),
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-56.759034, -22.71539)
)
]
);
map.addLayers([wmsOverlay, vectorLayer, capaGoogle]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var center = new OpenLayers.LonLat(-57.58, -25.27).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
)
map.setCenter(center, 6);
the "vectorLayer" layer must be above of my map, but I get this (my wms layer is in south america, my points have to be also in south america, but they're near africa):
http://i45.tinypic.com/34y40zk.png
What can I do?
Thanks in advance
You should to transform your point's coordinates:
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var epsg900913 = new OpenLayers.Projection('EPSG:900913');
vectorLayer.addFeatures([
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-57.635021, -25.276987).transform(epsg4326, epsg900913)
),
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-56.759034, -22.71539).transform(epsg4326, epsg900913)
)
]);
"next to Africa" = longitude 0 latitude 0
when you simply enter Longitude and Latitude, OL considers this a WGS84 projection (standard).
but since you are using a Google layer (CapaGoogle), which is a mercator-referenced projection, you end up using two reference projections (4326 = WGS84 AND 900913 = mercator) simultaneously and the map server disconsiders the location of your markers, since they are "incorrect". therefore, it simply places them at (0,0).
as DrNextGIS said, you must "transform your points coordinates" so that everything on your map uses the same projection.
you would NOT have this problem if you were using a simple OpenLayer map (without Google or OSM).
Related
While ago I had help over so about setting up a project where I need to mark random building in NYC and display some info about the building, long story short, I have displayed a openstreetmap using openlayers3, view is fix to Astoria(Queens, NYC).
Now popup is working but markers are not displaying.
I have tried to experiment and change geometry from this
geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633]))
to this ol.geom.Point(ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857')),
and use transform instead fromLonLat, but that didn't displayed them, next thing was src in styleIcon, I have download the standard openlayers3 marker and tried to add it from the image folder like src: 'img/icon.png', but that didn't work to.
Can someone please help me understand what is going on, why are mine markers not displaying properly on the map?
This is the JSFiddle for this project, you will see the popup working but no markers.
This JSFiddle is updated and it is working now, markers are displaying properly.
/* Create the map */
// Elements that make up the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
// Add a click handler to hide the popup.
// #return {boolean}.
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
// Create an overlay to anchor the popup
// to the map
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857');
// setting up openlayer3 view
var view = new ol.View({
center: city,
zoom: 15
});
// Create the map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay],
target: 'map',
view: view
});
// Setup markers
var markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633])),
name: 'Crescent St',
description: 'Apartment'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
name: 'Long Island City',
desctiption: 'Apartment'
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixel',
opacity: 0.75,
src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png',
})
})
});
map.addLayer(markers);
// Setting up click handler for the map
// to render the popup
map.on('singleclick', function(evt) {
var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature.get('name');
})
var coordinate = evt.coordinate;
content.innerHTML = name;
overlay.setPosition(coordinate);
});
map.on('pointermove', function(evt) {
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});
just remove the https from your src style.
Instead of src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png',
putsrc: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',
You also need to zoom out a bit to see your marks
I have 3 layers on a Google Maps map. The first is a set of polygons. The second is a set of markers. The third is a heatmap.
I'm using the following script libraries
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=visualization"></script>
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['intensitymap']}]}"></script>
I start with a Map object.
var MAP = new google.maps.Map(document.getElementById('map-canvas'),
{
zoom : 5,
center : new google.maps.LatLng(-25.610111, 134.354806),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
followed by the polygons
var polygons = new google.maps.FusionTablesLayer({
query : {
select : 'Polygons',
from : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
},
map : MAP,
suppressInfoWindows : true});
followed by the Markers, one of which is
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-28.8, 152.5),
map: MAP,
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
title: "Tabulam"});
followed by the heatmap (abbreviated)
var heatmapLayer = new google.maps.visualization.HeatmapLayer();
var heatData = [
{location: new google.maps.LatLng(-30.3, 153.1), weight: 102}]
heatmapLayer.setData(heatData);
heatmapLayer.setOptions({opacity:1, radius:50});
heatmapLayer.setMap(MAP);
All that wrapped in a function and called with
google.maps.event.addDomListener(window, 'load', initialize);
The problem that I have is that the heatmap is obscured behind the polygons. How do I bring it forward? Alternatively, how do I push the polygons right to the back?
I have a little problem with OpenLayers 3. I have the following script:
var map = new ol.Map({
view : new ol.View({
center : [5.611155, 52.238879],
projection : 'EPSG:4326',
zoom : 8.5,
minZoom : 8.5,
maxZoom : 12.5
}),
layers : [
new ol.layer.Tile({
source : new ol.source.OSM()
}),
],
target : 'map'
});
This should, if I am not mistaken, show a map centred on a place in The Netherlands. But instead of showing a map, I only see blue. Even if I set the zoom to 1, there is no world to see.
The problem doesn't seem to be there if I remove the projection attribute from the view. But then of course I should give all coordinates in another coordinate system, which is not possible because I depend on other systems as well.
When I removed the projection attribute from the view attribute and loaded a GeoJSON file like this:
new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:4326',
url: 'data/map.geojson'
})
})
It should place a layer on top of The Netherlands, but instead the GeoJSON was shown somewhere in Africa.
Can someone help me?
Openstreetmap has a different projection than OL3. OSM uses EPSG:900913 and when you uses it as background you have to use it as your main projection.
This will work for the first part of your problem:
var centerpos = [5.611155, 52.238879]; // Your original position in LatLon
var newpos = ol.proj.transform(centerpos,'EPSG:4326','EPSG:900913');
var map = new ol.Map({
view : new ol.View({
projection : 'EPSG:900913', // OSM projection
center : newpos,
zoom : 8.5,
minZoom : 8.5,
maxZoom : 12.5
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target : 'map'
});
For your last problem about GeoJson I think it will work because you set the projection (eventually set the projection in the source), but I haven't tested it.
I am new to OSM API. (Open Street Map)
I'm currently searching for a solution to select (or highlight) a vector in a OpenLayers.
i.e am trying to set a location for user. That user can give his location by clicking on map (Particular location) and then need to do some manipulation with those longitude and latitude.
JS Code i have tried
function showVehicleMap(){
ltArray = document.getElementById('deviceMonitorRightPaneForm:lat').value.split(",");
lgArray = document.getElementById('deviceMonitorRightPaneForm:lon').value.split(",");
directionArray = document.getElementById('deviceMonitorRightPaneForm:direction').value.split(",");
map = createMap("deviceMap");
for(var i=0;i<ltArray.length;i++)
{
var lonLat = new OpenLayers.LonLat( lgArray[i] ,ltArray[i] ).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
pointsArray.push(lonLat);
}
//prepare mid point
var latAvg = document.getElementById('deviceMonitorRightPaneForm:latAvg').value;
var lonAvg = document.getElementById('deviceMonitorRightPaneForm:lonAvg').value;
var midpoint = new OpenLayers.LonLat(lonAvg,latAvg).transform( fromProjection, toProjection);
//create Marker
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
//prepare list of markers
markers = addMarkersByDirection(markers, pointsArray, directionArray);
map.zoomToExtent(markers.getDataExtent());
map.setCenter (midpoint, 9);
//
/* ]]> */
}
How do i achieve it?
Register a mouse click event to get the position via the mouse:
map.events.register('click', map, function handleMapClick(e) {
var clickedLonLat = map.getLonLatFromViewPortPx(e.xy).transform(map.projection, map.displayProjection);
...
// place a OpenLayers.Layer.Marker at clickedLonLat for visual feedback
// for convenience: map.panTo(clicketLonLat);
...
});
I am new to creating maps using HTML and I have been attempting to add two vector layers (places, points) to a base map (roads), however I cannot see the vector layers on the map. The layers should appear as vector overlays to the base map. The layers are there as they are being shown in the layer switcher, but are not being displayed on screen. I believe the problem is to do with the way the vectors layers are being called. What is the solution to get the vector layers to be displayed. Thanks
var map = new OpenLayers.Map("map-id");
var roads= new OpenLayers.Layer.WMS(
"roads",
"http://localhost:8080/geoserver/wms",
{layers: "roads"});
var points= new OpenLayers.Layer.Vector(
"points",
"http://localhost:8080/geoserver/wms",
{layers: "points"});
var places= new OpenLayers.Layer.Vector(
"places",
"http://localhost:8080/geoserver/wms",
{layers: "places"});
map.addLayer(roads);
map.addLayer(points);
map.addLayer(places);
map.addControl(new OpenLayers.Control.LayerSwitcher());
You are trying to display your vector data through WMS protocol. For this purpose you should use OpenLayers.Layer.WMS instances instead OpenLayers.Layer.Vector. For displaying WMS layer as overlay use isBaseLayer option:
map = new OpenLayers.Map('map');
var places = new OpenLayers.Layer.WMS('places',
"http://localhost:8080/geoserver/wms",
{layers: "places", transparent: true},
{isBaseLayer: false, opacity: 1, singleTile: true, visibility: true}
);
map.addLayers([places]);