Creating Web Based Offline Maps Loading Tiles Locally - OpenLayers
OpenLayers Offline Maps Example
In my previous article I explained about OpenLayers - ASP.Net Logical Architecture and Communication Flow. In this article I will focus on OpenLayers Offline Maps Example, creating web based Offline OpenStreetMap and Openlayers - local tiles server for offline access.
OpenStreetMap can be used offline, without an internet connection, in a number of ways. In fact because the OpenStreetMap is more free, some offline offerings can be vastly superior to those of other map data providers, since they often deliberately use technical barriers to limit offline storage/distribution of their data.
Working offline is helpful for all sorts of reasons. Local storage is often faster than making requests to the internet. OpenStreetMap can be used in the developing world, and in disaster zones where internet is not available
OpenLayers - local tiles server for offline access
So first of all download OSM tiles (map images) to your computer and after downloading open street map tiles you can easily browse map offline. With this example you can browse your tiles stored localy without any webserver. Find the JavaScript code below: -
 |
| Offline Maps |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>OpenStreetMap - Simple way to create an Offline Web Based Offline Maps</title>
<script src="Js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="OLAPI/OpenLayers.js" type="text/javascript"></script>
<script src="Js/mapUtility.js" type="text/javascript"></script>
</head>
<body onload="Load()">
<form runat="server">
<h3>
Creating Offline Maps in Web Based Application - OpenLayers</h3>
<div id="map-canvas" style="width: auto; height: 500px;">
</div>
</form>
</body>
</html>
var isSearchDone = false;
var DeviceArray = new Array();
var DeviceISSI = new Array();
var LocationArray = new Array();
var TempArray = new Array();
document.onkeydown = function KeyDown(e) {
var keyCode = document.all ? event.keyCode : e.which;
}
// Start position for the map (hardcoded here for simplicity)
var lat = 28.471879;
var lon = 77.048532;
var zoom = 4;
var currentZoomLevel = 0;
var CurrentLocationTimer;
var map;
//Initialise the 'map' object
function Load() {
//Set Width 1059px;
var w = $(window).width();
var h = $(window).height();
$("#map-canvas").css("width", (w * (.8)) + "px");
$("#map-canvas").css("height", (h - 100) + "px");
map = new OpenLayers.Map("map-canvas", {
controls: [
new OpenLayers.Control.Navigation(),
//new OpenLayers.Control.PanZoomBar(),
//new OpenLayers.Control.Permalink(),
//new OpenLayers.Control.ScaleLine({ geodesic: true }),
//new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition()], //,
//new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
maxResolution: 156543.0339,
numZoomLevels: 20,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
// This is the layer that uses the locally stored tiles [post_ad]
var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "TileServer/OSM-MapLink/Tiles/${z}/${x}/${y}.png", { numZoomLevels: 20, alpha: true, isBaseLayer: true });
map.addLayer(newLayer);
// This is the end of the layer
map.events.register('zoomend', map, alert_on_zoom);
if (!map.getCenter()) {
var lonLat = new OpenLayers.LonLat(77.481253, 22.485213).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var lonLata = new OpenLayers.LonLat(77.481253, 22.485213).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"));
//EPSG:4326 to
map.setCenter(lonLat, zoom);
}
currentZoomLevel = map.getZoom();
}
//remove existing layer
function RemoveCustomLayer(layerName) {
var existingLayers = map.getLayersByName(layerName);
if (existingLayers.length > 0) {
map.removeLayer(existingLayers[0]);
}
}
function TransformGeoToMerc(lon, lat) {
return new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
}
function alert_on_zoom(event) {
NobPosition = map.getZoom();
setZoomHandle(NobPosition);
if (currentZoomLevel != map.getZoom()) {
currentZoomLevel = map.getZoom();
}
}
function setZoomHandle(_zoom) {
NobPosition = _zoom;
if (_zoom >= 2 && _zoom < 20)
$('.slider-handle').css("top", (19 - _zoom) * 8);
}
I hope you will enjoy the development tip while creating offline maps in asp.net web application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Also If you like this article, don't forget to share this article with your friends and colleagues.
I hope you will enjoy the development tip while creating offline maps in asp.net web application. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Also If you like this article, don't forget to share this article with your friends and colleagues.
Creating Web Based Offline Maps Loading Tiles Locally - OpenLayers
Reviewed by Ravi Kumar
on
2:33 PM
Rating:
Reviewed by Ravi Kumar
on
2:33 PM
Rating:
No comments: