CODEWITHSUNDEEP
dictionarymarkeramcharts
Xav
Xav

Reputation: 307

AmCharts map - insert html

I'm trying to create a pulse effect on a point on a AmCharts Map. In order to do this I need to insert HTML at a latitude and longitude point but can't work out how to do it through the api (http://docs.amcharts.com/3/javascriptmaps/)

Here is the effect I'm trying to achieve - http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle

Here is a jsfiddle of the map with the HTML and CSS http://jsfiddle.net/9cBXh/2/

// request #3275 
var dataPoints = [{
          latitude: '51.000000000000',
          longitude: '9.000000000000',
          type: 'bubble',
          color: '#cc0000',

          fixedSize: false,
          alpha: 0.9,
          height: 30,
          width: 30,
          centered: true,
          id: 'test'
  }];

AmCharts.ready(function() {
    // create AmMap object
    var map = new AmCharts.AmMap();
    // set path to images
    map.pathToImages = "http://www.ammap.com/lib/images/";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap:false,
        images: dataPoints
    }; 

    // pass data provider to the map object
    map.dataProvider = dataProvider;

    map.areasSettings = {
        autoZoom: true,
        selectedColor: "#CC0000"
    };

    // write the map to container div
    map.write("mapdiv");               

});

The red dot is the bubble generated through the api. The blue dot and circle is the html I need to insert at the lat and long co-ordinates...somehow!

Any help would be appreciated.

Upvotes: 1

Views: 2214

Answers (1)

martynasma
martynasma

Reputation: 8595

Here's a complete working example of the AmCharts map with several pulsating HTML elements as map markers:

http://www.amcharts.com/demos/custom-html-elements-map-markers/

(You can view the source by clicking on the EDIT button)

The idea is very simple:

Trap "positionChanged" event. Go throiugh all of the "images" in the map's dataProvider, create HTML elements for each of those, then position them directly over the map by using API functions that resolve longitude/latitude coordinates to screen top/left coordinates:

// add events to recalculate map position when the map is moved or zoomed
map.addListener("positionChanged", updateCustomMarkers);

// this function will take current images on the map and create HTML elements for them
function updateCustomMarkers (event) {
    // get map object
    var map = event.chart;

    // go through all of the images
    for( var x in map.dataProvider.images) {
        // get MapImage object
        var image = map.dataProvider.images[x];

        // check if it has corresponding HTML element
        if ('undefined' == typeof image.externalElement)
            image.externalElement = createCustomMarker(image);

        // reposition the element accoridng to coordinates
        image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
        image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
    }
}

// this function creates and returns a new marker element
function createCustomMarker(image) {
    // create holder
    var holder = document.createElement('div');
    holder.className = 'map-marker';
    holder.title = image.title;
    holder.style.position = 'absolute';

    // create dot
    var dot = document.createElement('div');
    dot.className = 'dot';
    holder.appendChild(dot);

    // create pulse
    var pulse = document.createElement('div');
    pulse.className = 'pulse';
    holder.appendChild(pulse);

    // append the marker to the map container
    image.chart.chartDiv.appendChild(holder);

    return holder;
}

Upvotes: 2

Related Questions