ThinkGeo.com    |     Documentation    |     Premium Support

How to create marker with creating text label

#1









Hi


 


I am using web edition control with .NET 3.5 using c#.


I am displaying shape file layers on the map with VE background.


My clients need to create text label (write text) on the map on button click. Please see attached screen shots (text label.gif). On enter key, label posted on the map with Marker or Pushpin object. See attached text label posted.gif.


 


When they are in the click mode, it should allow them to create unlimited label with Marker or Pushpin object and post on the map.


 


Also when they click to remove label button, and click specific label on the map, that label should remove on click from map.


 


I would appreciate your prompt response.


 


Thanks


Hiren


 




1374-Text_label.GIF (24.2 KB)
1375-Text_label_posted.GIF (27.3 KB)

#2

Hi Hiren,


I think you could try to implement this functionality like this:
1. Add the marker overlay to the map and give each marker a popup. The popup contains a textbox and a button, and the button hooks the onclick event to a Submit() function.
2. Register a click event for the marker so that the popup shows when user clicks on the marker.

3. In the Submit() function of the popup, you can raise a callback to save the text in the textbox to the layer’s column value. 
Hope this helps.
Any more questions please let us know.
Thanks,
Sun

 



#3









Hi Sun,


 


Referring to my previous post dated: 10-29-2009 07:19 PM


 


How do you create pushpin and enter label (type label) using client script when user clicks button.


I was asked to create above functionally using client script.


 


Thanks


Hiren




#4

Hiren,


The pushpin could be added as a marker and the type label could be a popup. Both of them can be added in the client side. We have done a sample to demonstrate how to implement the pushpin and type label using client script when user clicks button, please take a look.
Any more questions please let use know.
Thanks,
Sun

1410-Post6541.zip (7.3 KB)

#5









Hi Sun,


 


Thanks for quick reply.


This will create one pushpin with label on button click.


 


But I need to create dynamic multiple pushpins with labels on the screen.


 


Let’s say, when user clicks on button it should allow to set into pushpin creation mode. Then user clicks any where on the map screen to create pushpin with labels. Continuing this, user want to create multiple pushpins with labels on the map at different location with capability of retaining other pushpin and labels.


 


Also they need to remove pushpin and label on single or double click it self.


 


Please see attached pushpin-with-lables.gif that shows multiple labels (test1,test2… ) and redline measure tool distance between test4 and test3 labels.


 


Note: I have already implemented measure tools functionality.


 


Thanks


Hiren




1415-Pushpin-with-labels.JPG (39.6 KB)

#6

Hiren,


We made some change to our original sample to show you how to implement adding multiple pushpins by clicking on the map control. And also we have implemented the functionality that removes a pushpin by single click on it. The adding and removing functions will be active after you click the corresponding button. Please get the sample and take a look.
Any more questions please let me know.
Thanks,
Sun

1418-Post6541.zip (7.99 KB)

#7

Sun,



I will try out and let you know if there is any issue.



Thanks

Hiren



#8

OK, please let me know if you have any more questions. 
  
 Thanks, 
  
 Sun 


#9












Hi Sun,


 


I modified and tried your solution. It works great. But I have couple of issue when I tried pushpin-label with measure tool functionality.


 


Flow:



        
  1. Clicking on Measure line button draws multiple      lines between two points on map. The distance is calculated in miles      (feet) displayed at bottom of page.       On double clicks measure line modes gets released.  Please see attached MeasureTool.JPG for      screen shot.

    2.     
  2. Clicking on Add Marker button sets mode to create      multiple pushpins with custom label text where ever use clicks on map.      Clicking on Remove Marker set mode to remove marker with double clicking      on pushpin head.  Please see attached      Marker-lables.JPG for screen shot.


 


So far above two works fine independently.


 


Problem:


        1. When I create couple of markers with labels and then clicking Measure line to draw lines between two marker points, it draws lines.  From Marker-A to Marker-B to Marker-C or in any order between A-B-C. But some times it does not stop and drop end line point on desired marker head or even surrounding area of that marker. I don’t know what’s wrong here, but it’s very weird pattern that it follows.  Please see attached Marker-lables with Measure tool.JPG for screen shot.


 


I have attached (Marker-Label_MT.zip) for all screen shots and source code for your review.


I have forwarded required shape data files to support.


 


Please note if this works, then I am also going to  have tool tip functionality on mouse hover on a column from shape file.


 


Thanks


Hiren



1434-Marker-Label_MT.zip (238 KB)

#10

Hiren,


Sorry for this delay reply. We have tested your code and recreate the issue you mentioned. The reason is that there is some conflict between popup and measure tool. This issue could be fixed by setting the z index of the measure tool. The code is like this:

 


function activate() {
  //alert(measureLineControl);
  measureLineControl.activate();
  document.getElementById('isAddLabel').value = 'false';
  document.getElementById('isRemoveMarker').value = 'false';
  
  var layers = tgMap.getLayersByClass('OpenLayers.Layer.Vector');
  for (var i = 0; i < layers.length; i++) {
      layers[i].div.style.zIndex = 10000;
  }
}


Please have a try to see what happens.



Any more questions please let me know.
Thanks,
Sun

#11









Sun,


 


It works great after adding z-Index to Measure line tool.


 


Yet I have issue with marker placement on map. When click on map to create marker, it creates marker little below (offset by some X, Y) from clicked position. Can we create marker exactly on clicked position?


 


Your provided sample has Map1.MapUnit = GeographyUnit.DecimalDegree;  Is that’s causing offset?


In my solution I am using Map1.MapUnit = GeographyUnit.Meter;




Thanks


Hiren




#12

Hiren,


I guess it's not the issue of the map unit. If it's ture, you cannot see the markers adding into the viewport. It might be caused by the offset of the icon in the OpenLayers. The default position is at the upper left point of the icon, so you need to set the right offset to display your markers.


var size = new OpenLayers.Size(15, 17);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('theme/default/img/marker_blue.gif', size, offset);
var lonlat = new OpenLayers.LonLat(50, 50);
simpleMarkerOverlay.addMarker(new OpenLayers.Marker(lonlat, icon));


Please let me know if it won't fix your issue and provide us your code which adds the markers.


Thanks,

Howard



#13









Howard,


 


Please refer to post dated 11-11-2009 03:19 PM for source code and shape data file, followed by post from Sun (11-13-2009 12:44 AM). I added this code to main code. It works fine.


 


Referring to your solution, I did not see any new code change. 


 


I still have issue with marker placement on map. When click on map to create marker, it creates marker little below (offset by some X, Y) from clicked position.


 


Thanks


Hiren




#14

Hiren,


There is something wrong in the AddLabel function, you should change the e.clientX and e.clientY to e.x and e.y, the code could be like this:


function AddLabel(e) {
  if (document.getElementById('isAddLabel').value == 'true') {
      var pixel = new OpenLayers.Pixel(e.x, e.y);
      var lonlat = tgMap.getLonLatFromPixel(pixel);
      AddEnterLabel(lonlat);
  }
}


Please have a try to see what happens.
Any more questions please let me know.
Thanks,
Sun

#15

Sun,



Perfect. It's working.

Thanks for quick reply.



Thanks

Hiren



#16









Hi Sun,


 


I have another issue where Marker icon disappears when ‘Map1_TrackShapeFinished’ event fires. 


 


Please find attached MarkerWithLabel.zip file for source and images. You can use same shape data files that I sent earlier in this post.


 


Below is complete scenario.


 


Along with Marker-Label, Measure line tool I added highlight shape feature and showed it’s attributes on right hand side of map that on hover highlights feature on the map.


 



        
  1. Adding marker(s) on the map and measuring line      across those markers works fine. (pl. see Marker-lables with MT.JPG)

    2.     
  2. Removed all markers (by double clicking pushpin      head) from the map by clicking ‘Remove Marker’ button at bottom of page

    3.     
  3. Highlighted shape feature on the map, that shows      attributes on right hand side of map out of shape file. On hover of those      attributes highlights feature on the map with Cyan color.(pl. see highlight Features with Marker.GIF)


 


Up to this point all works fine.


 


       Issue: 


            I tried to re-create marker on the map. It did not create icon (pushpin) on the map, but it did created text box. (pl. see Marker-lables with MT-2.JPG)


 


I spent whole day to find out, but it did not helped to resolve. 


 


Thanks


Hiren




1468-MarkerWithLabel.zip (252 KB)

#17

Hi Hiren,


This issue is raised by the “Map1_TrackShapeFinished” event, because when this even is fired the web page does a post back, and the client side loses every marker, the map control loses the simple marker overlay as well. So you need to make some change to the OnMapCreated() function to add the simple marker overlay into map control again. The code of this function is like this:

var OnMapCreated = function(map) {
    //Marker with Pushpin  
    tgMap = map;

    simpleMarkerOverlay = new OpenLayers.Layer.Markers("SimpleMarkerOverlay");
    map.addLayer(simpleMarkerOverlay);

    //MT  
    displayLayer = new OpenLayers.Layer.Vector('displayLayer');
    displayLayer.styleMap.styles["default"].defaultStyle.strokeColor = "Dark Blue";
    displayLayer.styleMap.styles["default"].defaultStyle.strokeWidth = "3";

    map.addLayer(displayLayer);

    measureLineControl = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, { persist: true });
    measureLineControl.events.on({
        "measure": handleMeasurementCompleted,
        "measurepartial": handleMeasurements
    });

    map.addControl(measureLineControl);

    //Select features on map
    shapeOverlay = new OpenLayers.Layer.Vector({ style: { fillColor: 'red'} });
    map.addLayer(shapeOverlay);

    styleRed = {
        strokeColor: "#00FFFF",
        strokeWidth: 4,
        strokeDashstyle: "solid",
        pointRadius: 6,
        fillColor: "#00FFFF"
    };
}

Hope this helps and any more questions please let me know.
Thanks,
Sun 

#18









Hi Sun


 


Thanks for quick reply. It did fixed issue.


 


How do you retain all markers with label text on the map? 


When Map1_TrackShapeFinished event fires, all created markers and its label disappears.


 


Thanks


Hiren




#19

Hiren,


I think you’d better not use the server side TrackShapeFinished event if you want to retain all markers and label text. We have also a client side event called OnClientDrawEnd which is just like this event, so you can write a call back in this client side event and return the tracked feature back to server side; then do the same operation like the original code in you Map1_TrackShapeFinished function. 
To hook the client side OnClientDrawEnd event, you should set a handler in the server side code like this:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        ...

        Map1.OnClientDrawEnd = "Map1ClientDrawEnd";
    }
}

Then the client side code is like this:

function Map1ClientDrawEnd(feature) {
    // Do a callback with the passing in feature which is just tracked.
}

Any more questions please let me know.
Thanks,
Sun

#20









Hi Sun,


 


Thanks for reply. I think we are okay with Map1_TrackShapeFinished event.


 


But I have another issue with Tool Tip display.


Please see attached screen shots. 


 


Problem: When I hover middle red line tool tip is generated out of shape file and displayed in block (yellow), not fitting entirely inside block (Tooltip-block1.JPG). How do I display tool tip text entirely in to block dynamically. Some tool tips are bigger in length and we also have tool tip from multiple layers, tooltip (block-2.JPG) overlapping shapes (line and access point).


 


Thanks


Hiren




1504-Tooltip-block1.JPG (33.1 KB)
1505-tooltip_block-2.JPG (38.9 KB)