Draw Circle Around Map Marker in R

• Download GoogleMapV3WithCircle-noexe.zip - 42.4 KB
• Download GoogleMapV3WithCircle.zip - 3.4 MB

Introduction

Google Maps API is  used to embed maps in spider web page. current Latest version three is available.

V3 has added features for mobile application and desktop browser application.

Background

In this post, we will go through

- How to draw a Circe effectually the marker in Google map.

- How to change the circle position on moving the marker position.

- Modify then radius (increase/decrease size) of then Circe using slider.

Using the code

In this example, i accept used Google Map API version three.

we volition empathize functionality stride by stride.

Create new ASP.Net spider web awarding and add together ViewMap.aspx folio.

Step 1 : Add TextBoxes in folio for display selected breadth & longitude from map.

          <asp:TextBox ID="          txtPointA1"          runat="          server"          ClientIDMode="          Static"          Enabled="          false"          Width="          170px"          >          </asp:TextBox>          <asp:TextBox ID="          txtPointA2"          runat="          server"          ClientIDMode="          Static"          Enabled="          simulated"          Width="          170px"          >          </asp:TextBox>        

created ii textboxes, one for breadth and one for langitude.

these textbox values are modify when user moves marker from one position to another.

beneath is the code for become electric current breadth & logitude from map and set values into textboxes.

            office setLatLongValue() {       jQuery('            #txtPointA1').val(currentlatlng.lat());     jQuery('            #txtPointA2').val(currentlatlng.lng());   }          

Step 2 : Add Slider in folio for change radius of the circle.

SliderExtender is available in AjaxControlTookit.

First, you have to add together reference to AjaxControlToolkit into project, to use AjaxControlToolkit control in your page add it using @Register diractive in height of the folio subsequently @Page directive, like this :

          <%@ Register Assembly="          AjaxControlToolkit"          Namespace="          AjaxControlToolkit"          TagPrefix="          ajaxToolkit"          %>        

 this volition register AjaxControlToolkit in your aspx folio, now you lot can use controls available in AjaxControlToolkit.dll

now, add SliderExtender past using TagPrefix, similar this :

          <asp:TextBox ID="          txtPointB1"          runat="          server"          onchange="          drawCircle();"          ClientIDMode="          Static"          >          </asp:TextBox>          <ajaxToolkit:SliderExtender ID="          sliderRadius"          BehaviorID="          sliderRadius"          runat="          server"          TargetControlID="          txtPointB1"          Minimum="          200"          Maximum="          2000"          BoundControlID="          txtRadiusShow"          EnableHandleAnimation="          true"          EnableKeyboard="          simulated"          />          <asp:TextBox ID="          txtRadiusShow"          runat="          server"          MaxLength="          4"          CssClass="          setmargin"          ClientIDMode="          Static"          >          </asp:TextBox>          <span style="          font-size: 9pt;"          >          </bridge>        

The Slider extender control allows  user to choose a numeric value from a finite range. The Slider's orientation can be horizontal or vertical and it can too deed every bit a "discrete" slider, allowing only a specified number of values within its range.

Added SliderExtender control with 2 Textboxes, one for TargetControlID, one for BoundControlID

BoundControlID is the ID of the TextBox or Label that dynamically displays the slider's value.

TargetControlID is the Targeted control.

In TargetControlID textbox (txtPointB1),drawCirlce() javascript fucntion is called when silder value change,

this function is called in onchange upshot.

Add Div tag into page to laod map

          <div id="          map"          style="          height: 500px; width: 900px;"          />        

Now, Create JScript folio that contins all functions required for google map

- Loading google map

- Set marker,

- Draw cirlce around marker

- create information window on click of marker.

FileName : GoogleMapV3.js

Step iii :   Create function loadMap in  GoogleMapV3.js file

var map; var circle; var marker; var currentlatlng =          new          google.maps.LatLng(23.06368,          72.53135); var infowindow;  function loadMap() {      setLatLongValue();      var mapOptions = {         zoom:          16,         center: currentlatlng,         mapTypeId: google.maps.MapTypeId.ROADMAP     };      map =          new          google.maps.Map(document.getElementById('          map'), mapOptions);      google.maps.outcome.addDomListener(map,          '          click', function (e) {          currentlatlng = eastward.latLng;          if          (currentlatlng) {              map.panTo(currentlatlng);             setLatLongValue();             setMarker();         }     });  }        

declare all variables required for map, cirlce, marker, current breadth & longitude and infowindow.

map is created using google.maps.Map class provided by google.

Added mapOption :

- center  : holds the map location coordinates. ( create a LatLng object to hold this location by passing the location's coordinates ( latitude, longitude )

- zoom : specifies initial map zoom level.

- mapTypeId : specifies initial map type ( RAODMAP, SATELLITE, HYBRID or TERRAIN).

This map loaded into DIV (named 'map') created in aspx folio.

 Added event listener to handle click upshot in map expanse, in that handler yous take to do functionality for :

   - set marker on clicked points

   - need to call map.PanTo (currentlanlong) ,this method volition practise changes the heart of the map to given            points (breadth, longitude).

Step iv : Create function to Describe a Circle.

function drawCircle() {          if          (circle != undefined)         circumvolve.setMap(naught);      var radius =          200;          if          (jQuery('          #txtPointB1').val() !=          '          '          && !isNaN(jQuery('          #txtPointB1').val()) && parseInt(jQuery('          #txtPointB1').val())          >          0) {         radius = parseInt(jQuery('          #txtPointB1').val());     }     jQuery('          #txtPointB1').val(radius.toString());      var options = {         strokeColor:          '          #800000',         strokeOpacity:          1.0,         strokeWeight:          1,         fillColor:          '          #C64D45',         fillOpacity:          0.v,         map: map,         center: currentlatlng,         radius: radius     };      circumvolve =          new          google.maps.Circle(options); }        

every bit shown in in a higher place code, getting electric current radius value for cirlce from TextBox (txtPointB1).

To draw a circle, yous accept to set following properties :

 - clickable : Indicates whether this Circle handles mouse events. Defaults to true.

- draggable : used to drag this circle over the map. Defaults to imitation.

- fillColor : used to fill color in cirlce area.

- fillOpacity : used to set fill opacity between 0.0 and 1.0

- map : Map on which to brandish Circle.

- radius : The radius in meters on the Earth's surface

- strokeColor , - strokeOpacity

- strokeWeight : The stroke width in pixels. ( border around the circle)

 now create instance of Circle course by setting above options (new google.maps.Circle(options)).

when yous modify the slider value from aspx page, it will change then cirlce radius and will gear up to map (see below prototype)

Step 5 : create function for set Marker

function setMarker() {          if          (marker != undefined)         marker.setMap(zero);      marker =          new          google.maps.Marker({         position: currentlatlng,         draggable:          true,         map: map     });          if          (marking) {         google.maps.outcome.addDomListener(mark,          "          dragend", part () {             currentlatlng = marker.getPosition();             setLatLongValue();             drawCircle();         });         drawCircle();     } }        

 marker is created using google.maps.Markergrade by setting  current latitude longitude position and draggable=true.

added dragenedevent listener for marking to redraw circle on marker position changed ( or marker dragged from 1 bespeak to another)

Pace 6 : create lawmaking for brandish Information window on marker click

google.maps.result.addListener(marker,          "          click", function () {         var data =          '          <div>Electric current LatLong:</div><div>'          + currentlatlng +          '          </div>';         infowindow =          new          google.maps.InfoWindow({            content: information,            position: currentlatlng        });         infowindow.open(map);    });        

 as shown in to a higher place source, information window is created on marking click event.

The InfoWindow is used to render text information when a marker is clicked.

InfoWindow has following options(properties) available :

- content : Content to display in the InfoWindow. This can be an HTML chemical element, a plain-text string, or a cord containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, prepare content to exist a HTML element with that size.

- position : The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor'southward position volition be used instead.

Pace 7 : Add googleapi javascript file and GoogleMapV3.js file into page header to laod google map.

          <script language="          javascript"          src="          Scripts/jquery-one.4.1.min.js"          type="          text/javascript"          >          </script>          <script src="          https://maps.googleapis.com/maps/api/js?five=3.exp&sensor=false"          type="          text/javascript"          >          </script>          <script src="          Scripts/GoogleMapV3.js"          blazon="          text/javascript"          >          </script>        

Please exercise not forget to put googleapi javascription source into page, otherwise google map volition non work.

Step eight : Last, Call loadMap function on window loaded event from folio.

          <script type="          text/javascript"          language="          javascript"          >          $(window).load(function () {             loadMap();                   });          </script>

 loadMap function is called when window is loaded and map is going to loaded into div expanse.

taylorfroustommer.blogspot.com

Source: https://www.codeproject.com/Articles/587199/Draw-Cirlce-Around-Marker-in-Google-Map

Share this post