RSS

Category Archives: Geo Programming

Google Map InfoBox

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
<script type="text/javascript"> 
    var ib = null;
    var theMap = null; 
function initialize() {
    var latlng = new google.maps.LatLng(55.672962361614566, 12.56587028503418);

    var myMapOptions = {
         zoom: 15
        ,center: latlng
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,streetViewControl: false
    };
    theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');

// positioner
var position=[];
position.push(new google.maps.LatLng(55.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(55.66453963191134, 12.584795951843262));

// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");

  ib = new InfoBox({});

for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}

function createMarkers(position,content,name) {
    // alert("createMarkers("+position+","+content+","+name+")");
    var marker = new google.maps.Marker({
        map: theMap,
        draggable: false,
        position: position,
        visible: true,
        title: name
    });

    var boxText = document.createElement("div");
    boxText.style.cssText = "background: yellow; width: 300px; height: 70px; padding: 5px;";
    boxText.innerHTML = content;

    var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-37, -120)
        ,zIndex: null
        ,boxStyle: { 
            background: "url('tipbox.gif') no-repeat"
            ,opacity: 1
            ,width: "300px"
         }
        ,closeBoxMargin: "5px 5px 5px 5px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
    };

    google.maps.event.addListener(marker, "click", function (e) {
     alert("click");
        ib.setOptions(myOptions);
        ib.open(theMap, this);
    });

    ib.open(theMap, marker);
    ib.hide();

    }

}
</script> 

<title>Creating and Using an InfoBox</title> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 100%; height: 400px"></div></body>
</html>

 
Leave a comment

Posted by on September 14, 2015 in Geo Programming

 

Tags: ,

Link

http://gis.stackexchange.com/a/34613/14109

 
Leave a comment

Posted by on May 5, 2015 in Geo Programming

 

Tags:

OpenLayers 3 Map with Marker

OpenLayers 3 Map

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://openlayers.org/en/v3.2.1/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    
    <script>
    var map = new ol.Map({
        target: 'map',
        renderer: 'canvas',
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            //projection: 'EPSG:900913',
            center: ol.proj.transform([80.6350, 7.2964], 'EPSG:4326', 'EPSG:3857'),
            zoom: 10
        })

    });
    //Full Screen
    var myFullScreenControl = new ol.control.FullScreen();
    map.addControl(myFullScreenControl);

    map.addOverlay(new ol.Overlay({
        position: ol.proj.transform(
                [80.6350, 7.2964],
                'EPSG:4326',
                'EPSG:3857'
                ),
        element: $('<img src="//map.geo.admin.ch/1403704943/img/marker.png">')
    }));

    map.on('singleclick', function(evt) {
        var coord = evt.coordinate;
        var transformed_coordinate = ol.proj.transform(coord, "EPSG:900913", "EPSG:4326");
        console.log(transformed_coordinate);
    });
    

</script>

  </body>
</html>
 
1 Comment

Posted by on March 13, 2015 in Geo Programming

 

Tags:

Google Map Polygons Demo

polygon_area

How to get coordinates of a polygon?

How to delete a polygon?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>
<script src="jquery-1.10.2.js"></script>

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;

}

#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}

#color-palette {
clear: both;
}

.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}

#delete-button {
margin-top: 5px;
}
</style>
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
var polygons = [];
var drawingManager = null;
var bermudaTriangle;

function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}

function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}

function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}

function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}

// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);

var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);

var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);

var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}

function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}

function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});

return button;
}

function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}

function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});

var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);

// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});

// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

buildColorPalette();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
polygons.push(polygon);

});

}
google.maps.event.addDomListener(window, 'load', initialize);

function pointsToText() {

for (i = 0; i < polygons.length; i++) {
var coordinates = (polygons[i].overlay.getPath().getArray());

for (i = 0; i < coordinates.length; i++) {

$("#points").append("(" + coordinates[i]['k'] + "," + coordinates[i]['A'] + "),");

}
}
}
</script>
</head>
<body>
<div id="panel">
<div id="color-palette"></div>
<div>
<button id="delete-button">Delete Selected Shape</button>
</div>
<div>
<input type="button" onclick="pointsToText()" value="Get Coordinates">
<textarea id="points" cols="30" rows="20"></textarea><br>

</div>

</div>
<div id="map"></div>

</body>
</html>

 
1 Comment

Posted by on March 15, 2014 in Geo Programming, JavaScript

 

Tags:

MapServer + PostGIS + pgRouting + OpenLayers

 
1 Comment

Posted by on October 25, 2013 in Geo Programming

 

Tags: , , ,

OpenLayers GeoJSON Vector Layer

geojson

Geojson

Let’s see how we can add a vector layer to OpenLayers map with the help of  GeoJSON response received from the server. Web Server can produce response in GML, GeoJSON, XML…etc after running a spatial query.
OpenLayers has Format classes for interpreting each kind of response.
This response consists of raw data which should be converted to features and added to a vector layer in order to render with OpenLayers.

var newLayer = new OpenLayers.Layer.Vector("Filtered by Zoom Level", {
strategies: [new OpenLayers.Strategy.BBOX(),
],

protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost/test/a.php?start=79.891119%207.078768&end=81.000609%207.940130&method=SPD",
format: new OpenLayers.Format.GeoJSON({
externalProjection: new OpenLayers.Projection("EPSG:4326"),
internalProject: new OpenLayers.Projection("EPSG:900913")
})
}),

//filter: filter,

// styleMap: styleMap,
format: new OpenLayers.Format.GeoJSON({
externalProjection: new OpenLayers.Projection("EPSG:4326"),
internalProject: new OpenLayers.Projection("EPSG:900913")
})

});
map.addLayers([newLayer]);

Another Way

var newLayer = new OpenLayers.Layer.Vector("SPD", {
isBaseLayer: false,

styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#F00",
strokeOpacity: 1,
strokeWidth: 2,
fillColor: "#FF5500",
fillOpacity: 0.5,
label : "${ad}",
fontSize: "8px",
fontFamily: "Courier New, monospace",
labelXOffset: "0.5",
labelYOffset: "0.5"
}})
});


OpenLayers.Request.GET({
url: "http://localhost/test/a.php?start=79.891119%207.078768&end=81.000609%207.940130&method=SPD",
headers: {'Accept':'application/json'},
success: function (req)
{
var g = new OpenLayers.Format.GeoJSON();
var feature_collection = g.read(req.responseText);
newLayer.destroyFeatures();
newLayer.addFeatures(feature_collection);
}
});
map.addLayers([newLayer]);
 
Leave a comment

Posted by on July 6, 2013 in Geo Programming, JavaScript

 

Tags: , ,

Reverse Geocoding with Google Map API

Reverse Geocoding

Reverse Geocoding

Demo

If you know the latitude and longitude of a particular location, you can get the relevant address details such as city, state, region, country…etc. This process is known as Reverse Geocoding. In this post I ‘m gonna show you how this could be achieved with famous Google Map API. This entire post is based on one API request. Look at below code.

http://maps.googleapis.com/maps/api/geocode/json?latlng=-37.814251,144.963169&sensor=false

Enter above line in the browser bar to see a whole bunch of location details for the geographical point (-37.814251,144.963169) in lat lng format.
Pretty Simple. Here I’m using Google Map JavaScript API V3. All you need to do is to parse the json response to extract the information whatever you need.

jQuery.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng=-37.814251,144.963169&sensor=false',
type: 'POST',
dataType: 'json',
success: function(data) {
if(data.status == 'OK')
{

alert(data.results[1].formatted_address);
alert(data.results[1].address_components[0].long_name);
alert(data.results[1].address_components[1].long_name);

}

},
error: function(xhr, textStatus, errorThrown) {
alert("Unable to resolve your location");

}
});
 
2 Comments

Posted by on May 13, 2013 in Geo Programming, JavaScript

 

Tags: ,