Creating Web Based Offline Maps Loading Tiles Locally - OpenLayers


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: -
gis software development,Loading Tiles locally,Offline Web Based, Maps, Offline Local Tiles Storage Example, OpenStreetMap
Offline Maps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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>
<body onload="Load()">
    <form runat="server">
        Creating Offline Maps in Web Based Application - OpenLayers</h3>
    <div id="map-canvas" style="width: auto; height: 500px;">
ASP.Net, JavaScript, Solution, in Web Application
OSM using Openlayers
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 });
    // This is the end of the layer'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) {

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();
    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 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: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.