I found this Question Show only United States when using Leaflet.js and OSM which is exactly what I'm looking for but the problem is I don't use leaflet. Currently using OpenLayers at the moment, saw some example here but no luck any ideas?
<div id="map" class="map"></div>
<script type="text/javascript">
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([125.126012,6.066714]),
zoom: 17,
minZoom: 17,
maxZoom: 18
})
});
</script>
You would need to use the view extent property. Note that it restricts the location of the center of the map.
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([125.126012,6.066714]),
zoom: 17,
minZoom: 17,
maxZoom: 18,
extent:ol.proj.transformExtent([113,4, 119, 8], 'EPSG:4326', 'EPSG:3857')
})
});
Related
I've a map rapresentation, I want to add a layer based on a GEOJSON, but I don't want to read it directly from a GEOJSON file, instead I've a variable that contain the exact string of GEOJSON that I require, is possible to load it from a variable instead of an url?
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'bikesRented',
source: new ol.source.Vector({
url: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
format: new ol.format.GeoJSON()
}),
style: bikeStyle2
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.341868,44.494949]),
zoom: 14
})
});
You could read the features from your string and add them to the source
var source = new ol.source.Vector();
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'bikesRented',
source: source,
style: bikeStyle2
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.341868,44.494949]),
zoom: 14
})
});
source.addFeatures(
new ol.format.GeoJSON().readFeatures(geojsonstring, {
dataProjection: 'EPSG:4326',
featureProjection: map.getView().getProjection()
})
);
or you could use a data url and let OpenLayers load that
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'bikesRented',
source: new ol.source.Vector({
url: 'data:,' + encodeURIComponent(geojsonstring),
format: new ol.format.GeoJSON()
}),
style: bikeStyle2
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.341868,44.494949]),
zoom: 14
})
});
What's wrong with my code? I want to get coordinates with mousePosition. I use openlayer v5.
var map = new ol.Map({
target: 'map2',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([116.041389, 3.073093]),
zoom: 7.3
})
});
var mousePositionControl = new ol.MousePosition({
coordinateFormat: createStringXY(2),
projection: 'EPSG:4326',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
executing the above code will get an
"ReferenceError: createStringXY is not defined" error.
I need to constrain the map to only drag within the map view but It also needs to work across multiple resolutions:
var extent = [0, 0, 1685, 895];
var projection = new ol.proj.Projection({
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'assets/img/map.png',
projection: projection,
imageExtent: [0, 0, 1685, 895]
})
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3,
maxZoom: 5,
minZoom: 3
})
});
Is is possible to load a Tile layer from a TileImage source with tiles in its highest resolution (zoom) for a specific extent and have these tiles show for all zoom levels. I have high resolution imagery I wish to show as a layer above another Tile layer such as Bing or OSM.
Example source
var source = new ol.source.TileImage({
projection: 'EPSG:900913',
tileGrid: new ol.tilegrid.TileGrid({
projection: 'EPSG:900913',
extent: projectionExtent,
//extent: ol.proj.transformExtent([-83.7893967, 42.851353, -83.7855987, 42.849371], "EPSG:4326", "EPSG:900913"),
resolutions: resolutions,
tileSize:[pictometryImageSize, pictometryImageSize]
}),
tileUrlFunction: function(tileCoord, pixelRatio, projection){
var zoom = tileCoord[0];
console.log(zoom)
if(zoom == 21){
var tileGrid = this.getTileGrid();
var center = ol.proj.transform(ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord)),"EPSG:900913", "EPSG:4326");
return 'www.myrealtileurl;
}
//return undefined;
//return 'https://dummy.com';
},
minZoom: 0,
maxZoom: 21
});
I hope I understand you correctly. First, you can restrict layer extent with extent. Second, you can lock zoom with maxZoom and minZoom properties. OpenLayers will resize tiles on his own. Here is an example, where ArcGIS tile layer is locked in extent and zoom:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile({
extent: ol.proj.transformExtent([-110, 42, -100, 48], "EPSG:4326", "EPSG:3857"),
source: new ol.source.XYZ({
maxZoom: 6,
minZoom: 6,
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-105.89, 45.09]),
zoom: 6
})
});
I am working with openlayers 3 with a layer from mapbox or openstreetmap and I need to draw some circles on it.
I am able to print the circles with a view with a projection EPSG:4326, but then I have no map. Changing the projection with a transform the map is displayed, but the points are all together. The only way I am made it work is using TileWMS as a source, but I am not able to use it in production environment
Here is my code:
version 1: working with TileWMS
var source = new ol.source.GeoJSON({
url: 'geojson url'
});
var pointsLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({color: 'rgba(170,33,33, 0.8)'}),
stroke: new ol.style.Stroke({color: 'rgba(170,33,33, 0.3)', width: 8})
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
}),
pointsSource
],
view: new ol.View({
projection: 'EPSG:4326',
center: [-82.3, -10.65],
zoom: 3
})
});
This is the result
Using mapbox or osm, failing:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
})
}),
/*
new ol.layer.Tile({
source: new ol.source.OSM()
}),*/
pointsSource
],
view: new ol.View({
projection: 'EPSG:4326',
center: [-82.3, -10.65],
zoom: 3
})
});
This is the result
And finally, changing the view the map is displayed but the circles
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://api.tiles.mapbox.com/v4/XXXXX.kcp9cpdn/{z}/{x}/{y}.png?access_token=token'
})
}),
/*
new ol.layer.Tile({
source: new ol.source.OSM()
}),*/
pointsSource
],
view: new ol.View({
center: ol.proj.transform([-82.3, -10.65], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
And the result
Is there a way to make this work?
Thanks in advance.
I found the solution, here it is for it is helping anyone
Following this answer in gis stackexchange https://gis.stackexchange.com/a/118818/42868 There is an unstable option for the ol.source.GeoJSON object, so adding it in this way made it work
var source = new ol.source.GeoJSON({
url: 'geojson url',
projection: 'EPSG:3857'
});