We Keep Coding

MXGraph JSON Graphs with Angular - render and read graph using JSON and ANGULAR with mxGraph

I am trying to work with Angular and MX Graphs using JSON, I am sure that many of you also would think it is a great way to serialize graphs and also give them functionality within an angular application.
I have not been able to find a minimum example where a JSON representation of a graph is rendered from Angular.
Inn the demo part of this example with mxgraph using javascript, they simply render the graph from a json structure.
Example:
https://codepen.io/Gatcha/pen/oYexEB
JSON Structure
{
"graph": [
{
"value": {
"name": "Daffy Duck"
},
"geometry": {
"x": 90,
"y": 60,
"width": 120,
"height": 30,
"relative": false,
"TRANSLATE_CONTROL_POINTS": true,
"alternateBounds": null,
"sourcePoint": null,
"targetPoint": null,
"points": null,
"offset": null
},
"id": "2",
"vertex": true,
"connectable": true,
"parent": "1",
"source": null,
"target": null,
"edges": [
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "4",
"edge": true,
"parent": "1",
"source": "2",
"target": "3",
"mxObjectId": "mxCell#7"
}
],
"mxObjectId": "mxCell#6"
},
{
"value": {
"name": "Bugs Bunny"
},
"geometry": {
"x": 1020,
"y": 60,
"width": 120,
"height": 30,
"relative": false,
"TRANSLATE_CONTROL_POINTS": true,
"alternateBounds": null,
"sourcePoint": null,
"targetPoint": null,
"points": null,
"offset": null
},
"id": "3",
"vertex": true,
"connectable": true,
"parent": "1",
"source": null,
"target": null,
"edges": [
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "4",
"edge": true,
"parent": "1",
"source": "2",
"target": "3",
"mxObjectId": "mxCell#7"
}
],
"mxObjectId": "mxCell#8"
},
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "4",
"edge": true,
"parent": "1",
"source": "2",
"target": "3",
"mxObjectId": "mxCell#7"
},
{
"value": {
"name": "Elmer Fudd"
},
"geometry": {
"x": 90,
"y": 220,
"width": 120,
"height": 30,
"relative": false,
"TRANSLATE_CONTROL_POINTS": true,
"alternateBounds": null,
"sourcePoint": null,
"targetPoint": null,
"points": null,
"offset": null
},
"id": "5",
"vertex": true,
"connectable": true,
"parent": "1",
"source": null,
"target": null,
"edges": [
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "7",
"edge": true,
"parent": "1",
"source": "5",
"target": "6",
"mxObjectId": "mxCell#10"
}
],
"mxObjectId": "mxCell#9"
},
{
"value": {
"name": "Tasmanian Devil"
},
"geometry": {
"x": 1020,
"y": 220,
"width": 120,
"height": 30,
"relative": false,
"TRANSLATE_CONTROL_POINTS": true,
"alternateBounds": null,
"sourcePoint": null,
"targetPoint": null,
"points": null,
"offset": null
},
"id": "6",
"vertex": true,
"connectable": true,
"parent": "1",
"source": null,
"target": null,
"edges": [
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "7",
"edge": true,
"parent": "1",
"source": "5",
"target": "6",
"mxObjectId": "mxCell#10"
}
],
"mxObjectId": "mxCell#11"
},
{
"value": "Edge",
"geometry": {
"x": 0,
"y": 0,
"width": 0,
"height": 0,
"relative": true
},
"id": "7",
"edge": true,
"parent": "1",
"source": "5",
"target": "6",
"mxObjectId": "mxCell#10"
}
]
}
and this is the Javascript code that renders the graph, where the json is obtained from a text area called "from" and pased to JSON, pretty basic and simple:
/******************************************************************
Demo
******************************************************************/
const graphX = new GraphX(document.getElementById('graphContainer'));
document.getElementById('buttons').appendChild(mxUtils.button('From JSON', () => {
const dataModel = JSON.parse(document.getElementById('from').innerHTML);
graphX.render(dataModel);
}));
document.getElementById('buttons').appendChild(mxUtils.button('To JSON', () => {
const jsonNodes = graphX.getJsonModel();
document.getElementById('to').innerHTML = `<pre>${syntaxHighlight(stringifyWithoutCircular(jsonNodes))}</pre>`;
}));
Does anyone have a little Idea of how to do this with Angular, in any way in order to start documenting this for everyone also?
Thanks a lot.
May the force be with you.
Note: There is the mxHierarchicalLayout.js class that i think would allow you to create a hierarchical model of the graph.
Here is the whole javascript file.
I will keep trying and post whatever I learn, but please if you have a hint, would be really apretiated.
/******************************************************************
Core
******************************************************************/
class JsonCodec extends mxObjectCodec {
constructor() {
super((value)=>{});
}
encode(value) {
const xmlDoc = mxUtils.createXmlDocument();
const newObject = xmlDoc.createElement("Object");
for(let prop in value) {
newObject.setAttribute(prop, value[prop]);
}
return newObject;
}
decode(model) {
return Object.keys(model.cells).map(
(iCell)=>{
const currentCell = model.getCell(iCell);
return (currentCell.value !== undefined)? currentCell : null;
}
).filter((item)=> (item !== null));
}
}
class GraphX {
constructor(container){
if (!mxClient.isBrowserSupported()) {
return mxUtils.error('Browser is not supported!', 200, false);
}
mxEvent.disableContextMenu(container);
this._graph = new mxGraph(container);
this._graph.setConnectable(true);
this._graph.setAllowDanglingEdges(false);
new mxRubberband(this._graph); // Enables rubberband selection
this.labelDisplayOveride();
this.styling();
}
labelDisplayOveride() { // Overrides method to provide a cell label in the display
this._graph.convertValueToString = (cell)=> {
if (mxUtils.isNode(cell.value)) {
if (cell.value.nodeName.toLowerCase() === 'object') {
const name = cell.getAttribute('name', '');
return name;
}
}
return '';
};
}
styling() {
// Creates the default style for vertices
let style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_STROKECOLOR] = 'gray';
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_FONTSTYLE] = 1;
this._graph.getStylesheet().putDefaultVertexStyle(style);
// Creates the default style for edges
style = this._graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black';
style[mxConstants.STYLE_FONTSIZE] = '10';
this._graph.getStylesheet().putDefaultEdgeStyle(style);
}
getJsonModel(){
const encoder = new JsonCodec();
const jsonModel = encoder.decode(this._graph.getModel());
return {
"graph": jsonModel
}
}
render(dataModel) {
const jsonEncoder = new JsonCodec();
this._vertices = {};
this._dataModel = dataModel;
const parent = this._graph.getDefaultParent();
this._graph.getModel().beginUpdate(); // Adds cells to the model in a single step
try {
this._dataModel.graph.map(
(node)=> {
if(node.value) {
if(typeof node.value === "object") {
const xmlNode = jsonEncoder.encode(node.value);
this._vertices[node.id] = this._graph.insertVertex(parent, null, xmlNode, node.geometry.x, node.geometry.y, node.geometry.width, node.geometry.height);
} else if(node.value === "Edge") {
this._graph.insertEdge(parent, null, 'Edge', this._vertices[node.source], this._vertices[node.target])
}
}
}
);
} finally {
this._graph.getModel().endUpdate(); // Updates the display
}
}
}
/******************************************************************
Demo
******************************************************************/
const graphX = new GraphX(document.getElementById('graphContainer'));
document.getElementById('buttons').appendChild(mxUtils.button('From JSON', () => {
const dataModel = JSON.parse(document.getElementById('from').innerHTML);
graphX.render(dataModel);
}));
document.getElementById('buttons').appendChild(mxUtils.button('To JSON', () => {
const jsonNodes = graphX.getJsonModel();
document.getElementById('to').innerHTML = `<pre>${syntaxHighlight(stringifyWithoutCircular(jsonNodes))}</pre>`;
}));
/******************************************
Utils
********************************************/
function stringifyWithoutCircular(json){
return JSON.stringify(
json,
( key, value) => {
if((key === 'parent' || key == 'source' || key == 'target') && value !== null) {
return value.id;
} else if(key === 'value' && value !== null && value.localName) {
let results = {};
Object.keys(value.attributes).forEach(
(attrKey)=>{
const attribute = value.attributes[attrKey];
results[attribute.nodeName] = attribute.nodeValue;
}
)
return results;
}
return value;
},
4
);
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}

I was able to print the XML tree.
Here is how.
After you have a graph created in your typescript, there is an encoder class that you can use to get the XML representation of your basic graph. This serves as a basic step to start playing with the XML version of graphs and be able to render and serialize graphs.
var encoder=new mxCodec();
var node = encoder.encode(graph.getModel());
var graphText=mxUtils.getXml(node);
console.log(graphText)

After using json2csv I need to now convert it BACK to the JSON with Node

const { Parser, transforms: { unwind } } = require('json2csv');
const myCars = [
{
"carModel": "BMW",
"price": 15000,
"items": [
{
"name": "airbag",
"color": "white"
}, {
"name": "dashboard",
"color": "black"
}
]
}, {
"carModel": "Porsche",
"price": 30000,
"items": [
{
"name": "airbag",
"items": [
{
"position": "left",
"color": "white"
}, {
"position": "right",
"color": "gray"
}
]
}, {
"name": "dashboard",
"items": [
{
"position": "left",
"color": "gray"
}, {
"position": "right",
"color": "black"
}
]
}
]
}
];
const fields = ['carModel', 'price', 'items.name', 'items.color', 'items.items.position', 'items.items.color'];
const transforms = [unwind({ paths: ['items', 'items.items'], blankOut: true })];
const json2csvParser = new Parser({ fields, transforms });
const csv = json2csvParser.parse(myCars);
console.log(csv);
Will output
"carModel","price","items.name","items.color","items.items.position","items.items.color"
"BMW",15000,"airbag","white",,
,,"dashboard","black",,
"Porsche",30000,"airbag",,"left","white"
,,,,"right","gray"
,,"dashboard",,"left","gray"
,,,,"right","black"
I want to change all the GRAY to black as the CSV,
What would the best way to be then to convert the CSV back to the original JSON

Stacked bars in Charts.js from a JSON list of objects

i'm trying to create a Charts.js with stacked bars from a json list of objects, with no success...
my json is
[{
"machine": {
"machineId": 1,
"name": "a",
"description": "aaaaaa",
"active": true,
"direction": "IN"
},
"realEnergy": 56.99,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.11,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 57.11,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.14,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 58.18,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 71.11,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 64.11,
"lastUpdate": "2018-10-16 10:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 72.11,
"lastUpdate": "2018-10-16 10:30:00"
}]
I would like to have lastUpdate on the labels and stacked realEnergy values for the bars.
I was trying to adopt this json to match Charts.js dataset with no luck.
var size = Object.keys(json).length ;
labels = response.map(function(e) {
return e.lastUpdate;
});
for(var i = 0; i < size; i++){
datasetValue[i] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
label :json[i].machine.name,
data : json[i].realEnergy
}
}
var myData = {
datasets : datasetValue
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:myData
},
options: {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
}
}
});
}
I can get the labels correctly but no data on it, cannot understand how the dataset values should be created.

Dataset's data property is an array of values that will be distributed across the labels (in this case realEnergy value per each lastUpdate). I assume that each dataset should represent particular machine.
Here's the code to generate datasets and labels based on your JSON data:
const jsonData = JSON.parse(yourJSONData);
const colors = ['yellow', 'green', 'blue']; // purely optional
const machines = jsonData.reduce((uniqueMachines, record) => {
// find unique machines that will be base to our datasets
if (!uniqueMachines.find(machine => machine.machineId === record.machine.machineId))
uniqueMachines.push(record.machine);
return uniqueMachines;
}, []);
const lastUpdates = jsonData.reduce((uniqueLastUpdates, record) => {
// get labels for our chart
if (!uniqueLastUpdates.find(lastUpdate => lastUpdate === record.lastUpdate))
uniqueLastUpdates.push(record.lastUpdate);
return uniqueLastUpdates;
}, []);
const datasets = machines.map((machine, index) => {
const label = machine.name;
const backgroundColor = colors[index]; // purely optional
const data = lastUpdates.map(lastUpdate => {
const valueRecord = jsonData.find(record => record.machine.machineId === machine.machineId && record.lastUpdate === lastUpdate);
if (!valueRecord) return 0; // if value record is not defined, return 0;
return valueRecord.realEnergy;
});
return {
// here we return dataset
label,
backgroundColor,
data,
stack: 'main' // here we define the stack
};
});
And here's the final configuration for the chart:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lastUpdates,
datasets
},
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
A working example on the JSFiddle: click

Why is this forEach function repeating last value in all elements?

Look at this code:
var machines = [{
"name": "inclinedPlane",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_inclinedPlane.png",
"sound": "##instanceAssets/assets/audios/inclinedPlane.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/inclinedPlaneSong.png",
"onDrop": "##instanceAssets/assets/images/inclinedPlaneSongFilled.png"
}
}
},
{
"name": "pulley",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_pulley.png",
"sound": "##instanceAssets/assets/audios/pulley.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/pulleySong.png",
"onDrop": "##instanceAssets/assets/images/pulleySongFilled.png"
}
}
},
{
"name": "lever",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_lever.png",
"sound": "##instanceAssets/assets/audios/lever.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/leverSong.png",
"onDrop": "##instanceAssets/assets/images/leverSongFilled.png"
}
}
}];
var drops = {
"component": "DropContainer",
"parent": "main",
"style": {
"type": "image",
"scale": { "x": 1, "y": 1 }
}
};
I want to assign the the default value of each machine drop image to the src attribute of the merged object's style.
machines.forEach((machine) => {
const config = Object.assign(machine.images.drop, drops);
config.style.src = machine.images.drop.default;
console.log(config);
});
But for some reason, thesrc value on each object's style is always being the last one for all objects. I can't see why is this happening and I've spent a lot of time on this with no results. Can you see what's going on here?

You need to put the drops object inside of function forEach.
The problem you're facing is the reference of the same object drops in every assign you're executing.
Set the default value as follow: config.style.src = machine.images.drop.default;
var machines = [{ "name": "inclinedPlane", "images": { "draggable": { "src": "##instanceAssets/assets/images/mc_inclinedPlane.png", "sound": "##instanceAssets/assets/audios/inclinedPlane.mp3" }, "drop": { "default": "##instanceAssets/assets/images/inclinedPlaneSong.png", "onDrop": "##instanceAssets/assets/images/inclinedPlaneSongFilled.png" } } }, { "name": "pulley", "images": { "draggable": { "src": "##instanceAssets/assets/images/mc_pulley.png", "sound": "##instanceAssets/assets/audios/pulley.mp3" }, "drop": { "default": "##instanceAssets/assets/images/pulleySong.png", "onDrop": "##instanceAssets/assets/images/pulleySongFilled.png" } } }, { "name": "lever", "images": { "draggable": { "src": "##instanceAssets/assets/images/mc_lever.png", "sound": "##instanceAssets/assets/audios/lever.mp3" }, "drop": { "default": "##instanceAssets/assets/images/leverSong.png", "onDrop": "##instanceAssets/assets/images/leverSongFilled.png" } } }];
machines.forEach((machine) => {
var drops = { "component": "DropContainer", "parent": "main", "style": { "type": "image", "scale": { "x": 1, "y": 1 } } };
const config = Object.assign(machine.images.drop, drops);
config.style.src = machine.images.drop.default;
});
console.log(JSON.stringify(machines, null, 2))
.as-console-wrapper { max-height: 100% !important; top: 0; }

Here is the output after this simple change:
You already have the default property on the config object (in the root). You obtained it when you created your "merged" object. So...
Change
config.style.src = machine.images.drop;
To
config.style.src = config.default;
And that produces this output:
config.style.src: ##instanceAssets/assets/images/inclinedPlaneSong.png
config.style.src: ##instanceAssets/assets/images/pulleySong.png
config.style.src: ##instanceAssets/assets/images/leverSong.png
========================================
var machines = [{
"name": "inclinedPlane",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_inclinedPlane.png",
"sound": "##instanceAssets/assets/audios/inclinedPlane.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/inclinedPlaneSong.png",
"onDrop": "##instanceAssets/assets/images/inclinedPlaneSongFilled.png"
}
}
},
{
"name": "pulley",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_pulley.png",
"sound": "##instanceAssets/assets/audios/pulley.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/pulleySong.png",
"onDrop": "##instanceAssets/assets/images/pulleySongFilled.png"
}
}
},
{
"name": "lever",
"images": {
"draggable": {
"src": "##instanceAssets/assets/images/mc_lever.png",
"sound": "##instanceAssets/assets/audios/lever.mp3"
},
"drop": {
"default": "##instanceAssets/assets/images/leverSong.png",
"onDrop": "##instanceAssets/assets/images/leverSongFilled.png"
}
}
}];
var drops = {
"component": "DropContainer",
"parent": "main",
"style": {
"type": "image",
"scale": { "x": 1, "y": 1 }
}
};
machines.forEach((machine) => {
const config = Object.assign(machine.images.drop, drops);
config.style.src = config.default;
console.log('config.style.src: ' + config.style.src);
});

Embed json string in amchart chart?

I'm trying to embed some json into my amcharts. This is the javascript code in the html:
<script type="text/javascript">
AmCharts.makeChart("mapdiv", {
"type": "map",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 1,
"selectedScale": 0.5,
"selectedColor": "#089282",
"color": "#13564e",
"selectable": false,
"bringForwardOnHover": false
},
"areasSettings": {
"color": "#D3D3D3",
"autoZoom": true
},
"data": {
"map": "puertoRicoHigh"
},
"dataLoader": {
"url": "http://OurServer/Service1.svc/GetLocations",
"format": "json",
"showErrors": true,
"postProcess": function(data, config, map) {
// create a new dataProvider
var mapData = map.data;
// init images array
if (mapData.images === undefined)
mapData.images = [];
// create images out of loaded data
for(var i = 0; i < data.length; i++) {
var image = data[i];
image.type = "circle";
mapData.images.push(image);
}
return mapData;
}
}
});
</script>
And this is what the json looks like: [{"title":"Site1","latitude":18.37,"longitude":-67.18},{"title":"Site2","latitude":18.20,"longitude":-65.80}]
I've been trying to embed this json into the code, but I'm having trouble doing so.
I tried using dataprovider instead of dataloader since it's not an http request, but I know I'm missing something:
<script type="text/javascript">
AmCharts.makeChart("mapdiv", {
"type": "map",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 1,
"selectedScale": 0.5,
"selectedColor": "#089282",
"color": "#13564e",
"selectable": false,
"bringForwardOnHover": false
},
"areasSettings": {
"color": "#D3D3D3",
"autoZoom": true
},
"data": {
"map": "puertoRicoHigh"
},
"dataProvider": [{"title":"Site1","latitude":18.3764,"longitude":-67.1819},{"title":"Site2","latitude":18.2001,"longitude":-65.8081}],
"postProcess": function(data, config, map) {
// create a new dataProvider
var mapData = map.data;
// init images array
if (mapData.images === undefined)
mapData.images = [];
// create images out of loaded data
for(var i = 0; i < data.length; i++) {
var image = data[i];
image.type = "circle";
mapData.images.push(image);
}
return mapData;
}
});
</script>

The map dataProvider is an object, not an array, whose structure is demonstrated on the map demos on the AmCharts website. Since your JSON is basically an array of map images, going by the postProcess method, you can restructure your dataProvider like so, adding type: "circle" to each image and skipping the need for any further processing:
dataProvider: {
map: "puertoRicoHigh",
images: [
{"title":"Site1","latitude":18.3764,"longitude":-67.1819, "type": "circle"},
{"title":"Site2","latitude":18.2001,"longitude":-65.8081, "type": "circle"}
]
}
Demo:
AmCharts.makeChart("mapdiv", {
"type": "map",
"imagesSettings": {
"rollOverColor": "#089282",
"rollOverScale": 1,
"selectedScale": 0.5,
"selectedColor": "#089282",
"color": "#13564e",
"selectable": false,
"bringForwardOnHover": false
},
"areasSettings": {
"color": "#D3D3D3",
"autoZoom": true
},
"dataProvider": {
"map": "puertoRicoHigh",
"images": [{
"title": "Site1",
"latitude": 18.3764,
"longitude": -67.1819,
"type": "circle"
},
{
"title": "Site2",
"latitude": 18.2001,
"longitude": -65.8081,
"type": "circle"
}
]
}
});
<script src="//www.amcharts.com/lib/3/ammap.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/puertoRicoHigh.js"></script>
<div id="mapdiv" style="width: 100%; height: 400px;"></div>