Editing Javascript Maps (AmCharts)

@Sea4YouAug 31.2015

Dear fellow members,

Please excuse my ignorance if I posted this thread on the wrong section. I did a small scale search on the website before I posted the thread, but because I didn’t find exactly what I was looking for I decided to post a new thread.

Allow me to describe my problem: I found those beautifull maps on AmCharts (~~[URL=”http://www.amcharts.com/demos/custom-html-elements-map-markers/#theme-none”]~~http://www.amcharts.com/demos/custom-html-elements-map-markers/#theme-none[/URL] ~~[URL=”http://www.amcharts.com/demos/zooming-to-countries-map/#theme-dark”]~~http://www.amcharts.com/demos/zooming-to-countries-map/#theme-dark[/URL])

I have found a wordpress plugin, so I can directly upload those maps on my website. But here is my problem: I have zero knowledge of javascript and I want to combine those 2 maps, “use the black map background along with the zoom option but also be able to incorporate the yellow markers of the previous map” and also be able to put information onto them. E.g. if someone click libya and the maps zooms into libya, I want it to display a text or links I have already written before.

To sum up, it will be a map that will display maritime intel to maritime companies and seafarers alike.

Is there any way you can lend me hand with my project? I would be immensely greatfull and if you ever encounter a maritime themed project, or require research on the maritime industry I will gladly help.

Thanking you in advance for your time and interest,

Paul

to post a comment

JavaScript

5 Comments(s) _↴

@Ay__351_eSep 02.2015 — #If I understand

I open this page: http://www.amcharts.com/demos/zooming-to-countries-map/#theme-dark

I click "EDİT"

I see JS CODE:

 <br/>
 var map = AmCharts.makeChart( "chartdiv", {
 
 "type": "map",
 "theme": "dark",
 
 "dataProvider": {
 "map": "worldLow",
 "getAreasFromMap": true
 },
 "areasSettings": {
 "autoZoom": true,
 "selectedColor": "#CC0000"
 },
 "smallMap": {},
 "export": {
 "enabled": true,
 "position": "bottom-right"
 }
 } );

I open this page: http://www.amcharts.com/demos/custom-html-elements-map-markers/#theme-none

I click "EDİT"

I see js code

 <br/>
 areasSettings: {
 unlistedAreasColor: "#15A892"
 },
 
 <i>    </i>dataProvider: {
 <i>    </i>    map: "worldLow",
 <i>    </i>    images: [{
 <i>    </i>        zoomLevel: 5,
 <i>    </i>        scale: 0.5,
 <i>    </i>        title: "Brussels",
 <i>    </i>        latitude: 50.8371,
 <i>    </i>        longitude: 4.3676
 <i>    </i>    },

I search "libya longitude latidute" in google.

I look this page: http://www.timegenie.com/latitude_longitude/country/ly

I change this

 
 
 <i>    </i>areasSettings: {
 <i>    </i>    unlistedAreasColor: "#15A892"
 <i>    </i>},
 
 <i>    </i>dataProvider: {
 <i>    </i>    map: "worldLow",
 <i>    </i>    images: [{
 <i>    </i>        zoomLevel: 5,
 <i>    </i>        scale: 0.5,
 <i>    </i>        title: "Brussels",
 <i>    </i>        latitude: 50.8371,
 <i>    </i>        longitude: 4.3676
 <i>    </i>    },

to this:

 <br/>
 areasSettings: {
 unlistedAreasColor: "#15A892",
 autoZoom: true,
 selectedColor: "#CC0000"
 },
 smallMap: {},
 export: {
 enabled: true,
 position: "bottom-right"
 },
 dataProvider: {
 map: "worldLow",
 getAreasFromMap: true,
 images: [{
 zoomLevel: 5,
 scale: 0.5,
 title: "Libya",
 latitude: 30.7500,
 longitude: 20.2166
 },

I click "Open in JSFiddle"

The page open a new window.

I click Libya to zoom.

@Sea4YouauthorSep 03.2015 — #Perfect we found how we can add new locations to the map, thank you so much mate.

What about adding additional information, like a text windows that pops up when you click Libya?

And is it possible to combine aesthetically the 2 maps, so I can use the same functions of the green map on the black map? (the 2nd link)

Thank you advance!

Paul

@xelawhoSep 04.2015 — #Here you go. To get you started I coded for if someone clicks on Greenland, Australia or the United States (and a fallback for if they click somewhere you don't have specific info for) - you can see the switch statement at the bottom of the code which gets fired from a click on the mapObject. The case labels in the switch match the little pop up titles when you mouseover the countries.

The switch is a very intuitive piece of programming I think, but if you get stuck when you are extending it, feel free to ask. It just puts the message below the map there. No idea how this will go with wordpress integration...

[CODE]
 <!doctype html>
 <html lang="en">
 <head>
 <script src="http://www.amcharts.com/lib/3/ammap.js"></script>
 <script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
 <script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
 <style>
 #chartdiv {background: #3f3f4f;color:#ffffff; 
 width	: 100%;
 height	: 500px;
 } 
 
 .map-marker {
 /* adjusting for the marker dimensions 
 so that it is centered on coordinates */
 margin-left: -8px;
 margin-top: -8px;
 }
 .map-marker.map-clickable {
 cursor: pointer;
 }
 .pulse {
 width: 10px;
 height: 10px;
 border: 5px solid #f7f14c;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 background-color: #716f42;
 z-index: 10;
 position: absolute;
 }
 .map-marker .dot {
 border: 10px solid #fff601;
 background: transparent;
 -webkit-border-radius: 60px;
 -moz-border-radius: 60px;
 border-radius: 60px;
 height: 50px;
 width: 50px;
 -webkit-animation: pulse 3s ease-out;
 -moz-animation: pulse 3s ease-out;
 animation: pulse 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 position: absolute;
 top: -25px;
 left: -25px;
 z-index: 1;
 opacity: 0;
 }
 @-moz-keyframes pulse {
 0% {
 -moz-transform: scale(0);
 opacity: 0.0;
 }
 25% {
 -moz-transform: scale(0);
 opacity: 0.1;
 }
 50% {
 -moz-transform: scale(0.1);
 opacity: 0.3;
 }
 75% {
 -moz-transform: scale(0.5);
 opacity: 0.5;
 }
 100% {
 -moz-transform: scale(1);
 opacity: 0.0;
 }
 }
 @-webkit-keyframes "pulse" {
 0% {
 -webkit-transform: scale(0);
 opacity: 0.0;
 }
 25% {
 -webkit-transform: scale(0);
 opacity: 0.1;
 }
 50% {
 -webkit-transform: scale(0.1);
 opacity: 0.3;
 }
 75% {
 -webkit-transform: scale(0.5);
 opacity: 0.5;
 }
 100% {
 -webkit-transform: scale(1);
 opacity: 0.0;
 }
 } 
 </style>
 </head>
 <body>
 <div id="chartdiv"></div>
 <script> 
 var map = AmCharts.makeChart("chartdiv", {
 type: "map",
 "theme": "dark",
 path: "http://www.amcharts.com/lib/3/",
 
  imagesSettings: {
   rollOverColor: "#089282",
   rollOverScale: 3,
   selectedScale: 3,
   selectedColor: "#089282",
   color: "#13564e"
  },
 
  areasSettings: {
  "autoZoom": true,
  "selectedColor": "#CC0000"
  },
 
  dataProvider: {
  "getAreasFromMap": true,
   map: "worldLow",
   images: [{
   zoomLevel: 5,
   scale: 0.5,
   title: "Brussels",
   latitude: 50.8371,
   longitude: 4.3676
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Copenhagen",
   latitude: 55.6763,
   longitude: 12.5681
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Paris",
   latitude: 48.8567,
   longitude: 2.3510
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Reykjavik",
   latitude: 64.1353,
   longitude: -21.8952
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Moscow",
   latitude: 55.7558,
   longitude: 37.6176
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Madrid",
   latitude: 40.4167,
   longitude: -3.7033
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "London",
   latitude: 51.5002,
   longitude: -0.1262,
   url:"http://www.google.co.uk"
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Peking",
   latitude: 39.9056,
   longitude: 116.3958
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "New Delhi",
   latitude: 28.6353,
   longitude: 77.2250
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Tokyo",
   latitude: 35.6785,
   longitude: 139.6823,
   url:"http://www.google.co.jp"
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Ankara",
   latitude: 39.9439,
   longitude: 32.8560
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Buenos Aires",
   latitude: -34.6118,
   longitude: -58.4173
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Brasilia",
   latitude: -15.7801,
   longitude: -47.9292
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Ottawa",
   latitude: 45.4235,
   longitude: -75.6979
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Washington",
   latitude: 38.8921,
   longitude: -77.0241
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Kinshasa",
   latitude: -4.3369,
   longitude: 15.3271
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Cairo",
   latitude: 30.0571,
   longitude: 31.2272
   }, {
   zoomLevel: 5,
   scale: 0.5,
   title: "Pretoria",
   latitude: -25.7463,
   longitude: 28.1876
   }]
  }
 });
 
 // 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';
 
  // maybe add a link to it?
  if (undefined != image.url) {
   holder.onclick = function() {
   window.location.href = image.url;
   };
   holder.className += ' map-clickable';
  }
 
  // 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;
 } 
 
 map.addListener( "clickMapObject", function ( event ) {
 var where=event.mapObject.enTitle, mess="";
 
 switch(where){
 case "Greenland":
 mess="Greenland's not actually all that green, y'know.";
 break;
 case "United States":
 mess="Good burgers here.";
 break;
 case "Australia":
 mess="A.K.A down under, mate.";
 break;
 default:
 mess="You clicked on somewhere called "+where+"!";
 break;
 }
 document.getElementById("message").innerHTML=mess;
 } );
 
 
 </script> 
 <div id="message"></div>
 </body>
 </html>
 [/CODE]

@Ay__351_eSep 04.2015 — #I open this page:http://www.amcharts.com/demos/custom-html-elements-map-markers/#theme-none

I click "EDİT"

js code

 <br/>
 var map = AmCharts.makeChart("chartdiv", {
 type: "map",
 "theme": "none",
 
 <i>    </i>path: "http://www.amcharts.com/lib/3/",
 
 <i>    </i>imagesSettings: {
 <i>    </i>    rollOverColor: "#089282",
 <i>    </i>    rollOverScale: 3,
 <i>    </i>    selectedScale: 3,
 <i>    </i>    selectedColor: "#089282",
 <i>    </i>    color: "#13564e"
 <i>    </i>},
 
 <i>    </i>areasSettings: {
 <i>    </i>    "alpha": 0.5,
 <i>    </i>    "autoZoom": true,
 <i>    </i>"selectedColor": "#CC0000",
 <i>    </i>    unlistedAreasColor: "#15A892",
 
 <i>    </i>},
 
 <i>    </i>"smallMap": {},
 "export": {
 "enabled": true,
 "position": "bottom-right"
 },
 dataProvider: {
 
 <i>    </i>    map: "worldLow",
 <i>    </i>      getAreasFromMap: true,
 
 <i>	</i>	images:[{
 <i>    </i>        zoomLevel: 5,
 <i>    </i>        scale: 0.5,
 <i>    </i>        title: "Bingazi",
 <i>    </i>        latitude:32.1166,
 <i>    </i>        longitude: 20.0666, 
 <i>	</i>		url:"http://www.google.com"
 
 <i>    </i>    },  {
 <i>    </i>        zoomLevel: 5,
 <i>    </i>        scale: 0.5,
 <i>    </i>        title: "Ankara",
 <i>    </i>        latitude: 39.9439,
 <i>    </i>        longitude: 32.8560,
 <i>    </i>         url:"http://www.google.com"
 <i>    </i>    }, {
 <i>    </i>        zoomLevel: 5,
 <i>    </i>        scale: 0.5,
 <i>    </i>        title: "Atina",
 <i>    </i>        latitude: 37.9833,
 <i>    </i>        longitude: 23.7166,
 <i>    </i>         url:"http://www.google.com"
 <i>    </i>    }],
 <i>    </i>     areas:  [
 
 {title: "Türkiye",id: "TR",color: "pink",  description: "Türkiye hakk&amp;#305;nda bilgiler"},
 {title: "Yunanistan",id: "GR",color: "cyan", description: "Yunanistan hakk&amp;#305;nda bilgiler buraya gelir"},
 {title: "Libya",id: "LY",color: "purple",   description:"Libya hakk&amp;#305;ndaki bilgiler burada &lt;br&gt;&lt;a target='_blank' href='http://www.google.com'&gt;google.com&lt;/a&gt;",   balloonText:"balon metni "}]
 }
 
 });
 
 // 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;
 
 <i>    </i>// go through all of the images
 <i>    </i>for( var x in map.dataProvider.images) {
 <i>    </i>    // get MapImage object
 <i>    </i>    var image = map.dataProvider.images[x];
 
 <i>    </i>    // check if it has corresponding HTML element
 <i>    </i>    if ('undefined' == typeof image.externalElement)
 <i>    </i>        image.externalElement = createCustomMarker(image);
 
 <i>    </i>    // reposition the element accoridng to coordinates
 <i>    </i>    image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
 <i>    </i>    image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
 <i>    </i>}
 }
 
 // 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';
 
 <i>    </i>// maybe add a link to it?
 <i>    </i>if (undefined != image.url) {
 <i>    </i>    holder.onclick = function() {
 <i>    </i>        window.location.href = image.url;
 <i>    </i>    };
 <i>    </i>    holder.className += ' map-clickable';
 <i>    </i>}
 
 <i>    </i>// create dot
 <i>    </i>var dot = document.createElement('div');
 <i>    </i>dot.className = 'dot';
 <i>    </i>holder.appendChild(dot);
 
 <i>    </i>// create pulse
 <i>    </i>var pulse = document.createElement('div');
 <i>    </i>pulse.className = 'pulse';
 <i>    </i>holder.appendChild(pulse);
 
 <i>    </i>// append the marker to the map container
 <i>    </i>image.chart.chartDiv.appendChild(holder);
 
 <i>    </i>return holder;
 }

I click "Resources"

I add css file

 <br/>
 [COLOR="#FF0000"] &lt;link rel="stylesheet" href="http://www.amcharts.com/lib/3/ammap.css" type="text/css"&gt;[/COLOR]
 &lt;script src="http://www.amcharts.com/lib/3/ammap.js"&gt;&lt;/script&gt;
 &lt;script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"&gt;&lt;/script&gt;
 &lt;script src="http://www.amcharts.com/lib/3/themes/none.js"&gt;&lt;/script&gt;

I click "Open in JSFiddle"

I click Libya, popup appears.

The code add a div

<i>
 </i>
 
 &lt;div style="position: absolute; top: 28.3657px; left: 1096.27px;" title="Atina" class="map-marker map-clickable"&gt;&lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="pulse"&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div style="position: absolute; top: -20.6482px; left: 1274.47px;" title="Ankara" class="map-marker map-clickable"&gt;&lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="pulse"&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div style="position: absolute; top: 167.771px; left: 1025.1px;" title="Bingazi" class="map-marker map-clickable"&gt;&lt;div class="dot"&gt;&lt;/div&gt;&lt;div class="pulse"&gt;&lt;/div&gt;&lt;/div&gt;
 
 
 &lt;div style="position: absolute; left: 0px; top: 0px;"&gt;&lt;div class="ammapDescriptionWindow amcharts-description-div" style="position: absolute; width: 250px; left: 609px; top: 239px; z-index: 1000;"&gt;&lt;img style="float: right; cursor: pointer;" src="http://www.amcharts.com/lib/3/images/xIcon.svg" class="ammapDescriptionWindowCloseButton amcharts-description-close-img"&gt;&lt;div class="ammapDescriptionTitle amcharts-description-title-div"&gt;Libya&lt;/div&gt;&lt;div style="" class="ammapDescriptionText amcharts-description-text-div"&gt;Libya hakkÄ±nda bilgiler&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

If I delete this line:

getAreasFromMap: true,

map is [COLOR="#008080"]green[/COLOR].

If I don't delete this line:

getAreasFromMap: true,

map is [COLOR="#FFFF00"]yellow[/COLOR].

I did not found how to change map color

@xelawhoSep 04.2015 — #The map colors can be altered by assigning values to the "theme". In the above example you have "none" selected. Mine uses "dark". No need to play around with the css unless you want to do something really out there

Also in #JavaScript _↴

window.open question Problem in displaying menus using javascript..If formular

Success!

Help @Sea4You spread the word by sharing this article on Twitter...

Tweet This

Editing Javascript Maps (AmCharts)

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Editing Javascript Maps (AmCharts)

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴