Deploy an OpenStreetMap slippymap on my own website
This simple example may help if you are Deploying your own Slippy Map. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!
Contents [hide]
1 Note: OpenStreetMap is serving the tile images
2 Instructions
2.1 Extensions
2.1.1 Bespoke
3 Develop this example?
4 Related
Note: OpenStreetMap is serving the tile images
Please note that tile images are coming from the OpenStreetMap servers. Although OSM are supporting this kind of usage at the moment, we offer no guarantees. There may be downtime (planned or unplanned), and tile URLs may change.
If you are expecting heavy user load, then you should discuss with everyone first (Contact). You should consider following the other instructions on the "Deploying your own Slippy Map" page, to render and host your own tile images, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.
Of course the images themselves (our maps) change over time too, not necessarily for the better.
Instructions
Example result
Copy the following into a new HTML file, and view it in a browser.
<html>
<head>
<title>OpenStreetMap</title>
<!-- bring in the OpenLayers javascript library
(here we bring it from the remote site, but you could
easily serve up this javascript yourself) -->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers.
Using this hosted file will make sure we are kept up
to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
var lat=51.508;
var lon=-0.118;
var zoom=13;
var map; //complex object of type OpenLayers.Map
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
// Define the map layer
// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
if( ! map.getCenter() ){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
}
</script>
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>Extensions
Bespoke
If you are deploying your own tile images (for example, with Mapnik), just use the layer definition below:
var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});
map.addLayer(newLayer);Important! Please note the addition of /${z}/${x}/${y}.png to the URL, this has been required since the 27th June 2009.
Change the url and numZoomLevels as appropriate.
分享到:
相关推荐
使用OpenStreetMap图像OpenStreetMap(http://www.openstreetmap.org (http://www.openstre
Arcgis editor for openstreetmap插件10.2版本,(是10.2.0而非10.2.x),官网上没有,找了很久才找到的,分享给大家。安装后直接打开arcgis的toolbox即可使用~
openstreetmap-tiles-docker, 在 Docker 容器中,OpenStreetMap Tile服务器 条码服务器容器这个库包含了构建一个 Docker 图像的指令,该图像包含了为软件栈提供的OpenStreetMap瓦片。 它是基于 Switch2OSM指令的。...
OpenStreetMap was started because most maps you think of as free actually have legal or technical restrictions on their use, holding back people from using them in creative, productive, or unexpected ...
2020年11月21日从OpenStreetMap爬取的成都市shp数据,包括Lines.shp、multilinestrings.shp、multipolygon.shp、points.shp四个shp文件。
离线地图_openstreetmap_postgresql_postgis_mapnik_osm2pgsql_osm数据 写于20150414 关于软件地址 事先说明这其实就是我全部放到百度网盘空间里了。 所以万一一不小心我手抖删了,请mail我。 haibinzhagncn@qq....
使用pyton对OpenStreetMap地图数据进行清洗 import lxml.etree as ET from collections import defaultdict import matplotlib.pyplot as plt %matplotlib inline import pprint import re import codecs import ...
OpenStreetMap是一个可供自由编辑的世界地图,它是由像您这样的用户创造的。OpenStreetMap允许您查看,编辑或者使用世界各地的地理数据来帮助您
对SUMO中使用openstreetmap的简单介绍
基于OpenStreetMap的地图初步实现,实现了地图显示,移动,缩放和marker
openstreetmap数据,北京市路网,也有全国数据,需要可留言
openstreetmap-tile-server 给定.osm.pbf文件,此容器使您可以轻松设置OpenStreetMap PNG切片服务器。 它基于的,因此使用默认的OpenStreetMap样式。设置服务器首先创建一个Docker卷来保存将包含OpenStreetMap数据的...
# Python获取openstreetmap(OSM)路网信息 自动爬取城市路网图片和矢量图 1. 包含中国城市的经纬度 json文件,根据经纬度自动爬取 osm 道路网; 2. 使用 matplotlib 将路网绘制为白底黑线的png格式图片; 3. 使用 ...
开源地图openstreetmap的入门代码,使用的平台是android studio2.2,下载后直接打开就可以用。这个代码可以很好地把地图展示出来。
向ArcGIS导入OpenStreetMap数据,充分应用osm数据
osmdroid-android-5.1-sources.jar是2016年1月24日发布的最新的Android平台OpenstreetMap 地图开发jar包。osmdroid GitHub地址https://github.com/osmdroid/osmdroid
Java OpenStreetMap编辑器,是开放街图地理信息的自由编辑工具,以Java撰写。其有许多高级的功能,但是也比默认的iD在线编辑器有较复杂的用户界面。JOSM有一些重要的功能,如导入GPX文件(GPS轨迹),也可以与空中摄影...
iD 是一个完全使用 JavaScript 开发的 OpenStreetMap 地图数据编辑器。
openstreetmap-website, 支持http的Rails 应用程序 Rails 端口" 这是 Rails 端口,它是支持网站和API的Ruby on Rails... 软件也称为"openstreetmap网站"。这里存储库包括:该网站,包括用户帐户,日记条目,user-to-use
Leaflet_OpenStreetMap_Example:这是一个示例项目,用于实践传单和openstreetmap的组合以进行映射