A
I answered your question in one answer, this is the link of your other question. https://es.stackoverflow.com/questions/154794/cambiar-puntos-por-marcadores-en-mapa-openlayer-javascript/155127#155127 var iconFeature = new ol.Feature({});
var iconStyle = new ol.style.Style({});
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var layer = new ol.layer.Vector({ /layer con los poligonos/
source: new ol.source.Vector()
})
function crearMarcadores(centroPoligono, CentroCosto) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(centroPoligono),
name: CentroCosto
});
vectorSource.addFeature(iconFeature);
iconFeature.setStyle(iconStyle);
//------------start creation popup
var div = document.createElement('div');
div.setAttribute("id", CentroCosto);
document.body.appendChild(div);
var element = document.getElementById(CentroCosto);
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
//------------end creation popup
// --------------display popup on click
map.on('click', function(evt) {
console.log("Click");
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
console.log("name:");
var tag = feature.get('name');
var indice = tag.indexOf("-");
var substring = tag.substring(0, indice);
$('.agregar').tagsinput('add', substring);
console.log(feature.get('name'));
if (feature.get('name') == CentroCosto) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('name')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
//---------------end display popup on click
} //termina funcion crearMarcadores
function crearPoligonos(coordenada, cc) {
iconStyle = new ol.style.Style({
image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
})),
text: new ol.style.Text({
text: cc,
fill: new ol.style.Fill({
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
offsetX: -30,
offsetY: 30
})
});
iconFeature.setStyle(iconStyle);
var coordenadas = coordenada.split(' ') // Separamos por espacio
.map(function(data) {
var info = data.split(','), // Separamos por coma
coord = { // Creamos el obj de coordenada
lat: parseFloat(info[1]),
lng: parseFloat(info[0])
};
return coord;
});
console.log(coordenada);
//var parserJSTS = new jsts.io.OL3Parser();
var poly = new ol.Feature({
geometry: new ol.geom.Polygon([coordenadas.map(function(_ref) {
var lng = _ref.lng,
lat = _ref.lat;
return [lng, lat];
})])
});
var boundingBox = poly.getGeometry().getExtent()
layer.getSource().addFeature(poly)
var centro = ol.extent.getCenter(boundingBox);
console.log("Centro:");
console.log(centro);
console.log(cc);
crearMarcadores(centro, cc);
}
function errores(msg) {
alert('Error: ' + msg.responseText);
}
//------------start creation map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AudCyoI6al0eAZmQhwmI1IG9AOdGH8DHHk6PsiGta1faEACulxawFU9KV-XAvZ8f',
imagerySet: 'AerialWithLabels'
})
}),
layer, vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: new ol.View({
center: [-90.833434, 13.990260],
zoom: 14,
projection: 'EPSG:4326'
})
});
// --------------end creation map
//generar mapas-------------------------------
function generarMapas() {
coordenadas1 = '-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984,13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 -90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192,13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287,13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.993512 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533,13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -90.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720,13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993033 -90.833792,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 -90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902,13.993982 -90.833910,13.994037';
coordenadas2 = '-90.833434,13.990260 -90.833444,13.990321 -90.833452,13.990383 -90.833461,13.990446 -90.833470,13.990509 -90.833479,13.990572 -90.833486,13.990635 -90.833494,13.990697 -90.833501,13.990760 -90.833510,13.990823 -90.833520,13.990886 -90.833530,13.990948 -90.833538,13.991006 -90.833545,13.991061 -90.833552,13.991112 -90.833557,13.991165 -90.833561,13.991220 -90.833567,13.991282 -90.833572,13.991348 -90.833580,13.991414 -90.833587,13.991476 -90.833593,13.991536 -90.833601,13.991597 -90.833608,13.991662 -90.833617,13.991727 -90.833627,13.991790 -90.833633,13.991853 -90.833640,13.991914 -90.833648,13.991972 -90.833654,13.992029 -90.833661,13.992086 -90.833668,13.992140 -90.833673,13.992172 -90.833702,13.992167 -90.833755,13.992160 -90.833819,13.992153 -90.833884,13.992146 -90.833950,13.992140 -90.834017,13.992135 -90.834085,13.992127 -90.834153,13.992116 -90.834222,13.992105 -90.834292,13.992095 -90.834356,13.992088 -90.834417,13.992084 -90.834470,13.992078 -90.834518,13.992075 -90.834582,13.992066 -90.834658,13.992058 -90.834727,13.992049 -90.834795,13.992041 -90.834863,13.992034 -90.834931,13.992027 -90.834996,13.992018 -90.835057,13.992012 -90.835114,13.992006 -90.835168,13.992000 -90.835223,13.991995 -90.835280,13.991988 -90.835340,13.991981 -90.835403,13.991973 -90.835465,13.991966 -90.835527,13.991958 -90.835590,13.991949 -90.835653,13.991940 -90.835718,13.991935 -90.835787,13.991931 -90.835857,13.991923 -90.835930,13.991916 -90.836003,13.991906 -90.836068,13.991898 -90.836120,13.991893 -90.836162,13.991887 -90.836187,13.991882 -90.836204,13.991875 -90.836197,13.991794 -90.836145,13.991395 -90.836119,13.991187 -90.836033,13.990464 -90.835948,13.989722 -90.835879,13.989197 -90.835811,13.988582 -90.835741,13.988067 -90.835732,13.988048 -90.835714,13.988048 -90.835371,13.988126 -90.834888,13.988240 -90.834481,13.988308 -90.834036,13.988350 -90.833573,13.988409 -90.833208,13.988448 -90.833210,13.988464 -90.833219,13.988531 -90.833229,13.988598 -90.833236,13.988664 -90.833244,13.988729 -90.833251,13.988790 -90.833258,13.988849 -90.833264,13.988906 -90.833270,13.988964 -90.833278,13.989023 -90.833288,13.989081 -90.833295,13.989133 -90.833301,13.989185 -90.833307,13.989231 -90.833315,13.989282 -90.833321,13.989336 -90.833327,13.989388 -90.833332,13.989440 -90.833339,13.989494 -90.833348,13.989551 -90.833354,13.989613 -90.833361,13.989674 -90.833369,13.989737 -90.833378,13.989800 -90.833386,13.989863 -90.833393,13.989926 -90.833399,13.989988 -90.833408,13.990049 -90.833415,13.990102 -90.833422,13.990155 -90.833427,13.990208 -90.833429,13.990227 -90.833432,13.990221 -90.833439,13.990218 -90.833445,13.990221 -90.833448,13.990227 -90.833445,13.990233 -90.833440,13.990236 -90.833433,13.990235 -90.833430,13.990230 -90.833434,13.990260';
coordenadas3 = '-90.832897,13.988475 -90.832609,13.988518 -90.832313,13.988560 -90.831989,13.988602 -90.831516,13.988661 -90.831053,13.988720 -90.830599,13.988780 -90.830545,13.988793 -90.830547,13.988811 -90.830552,13.988849 -90.830557,13.988886 -90.830563,13.988926 -90.830569,13.988968 -90.830575,13.989010 -90.830582,13.989052 -90.830588,13.989092 -90.830593,13.989132 -90.830598,13.989173 -90.830605,13.989216 -90.830610,13.989257 -90.830616,13.989298 -90.830622,13.989341 -90.830628,13.989385 -90.830634,13.989431 -90.830640,13.989474 -90.830646,13.989517 -90.830654,13.989561 -90.830662,13.989607 -90.830670,13.989651 -90.830677,13.989692 -90.830684,13.989732 -90.830691,13.989774 -90.830697,13.989819 -90.830703,13.989863 -90.830709,13.989903 -90.830715,13.989945 -90.830722,13.989989 -90.830727,13.990031 -90.830733,13.990072 -90.830739,13.990113 -90.830745,13.990153 -90.830752,13.990194 -90.830758,13.990233 -90.830762,13.990268 -90.830767,13.990308 -90.830774,13.990356 -90.830779,13.990398 -90.830783,13.990436 -90.830787,13.990475 -90.830789,13.990515 -90.830793,13.990559 -90.830797,13.990600 -90.830802,13.990639 -90.830807,13.990680 -90.830813,13.990723 -90.830820,13.990768 -90.830826,13.990818 -90.830832,13.990868 -90.830839,13.990921 -90.830846,13.990976 -90.830853,13.991032 -90.830862,13.991089 -90.830869,13.991147 -90.830878,13.991208 -90.830883,13.991271 -90.830890,13.991334 -90.830901,13.991393 -90.830912,13.991453 -90.830920,13.991509 -90.830927,13.991560 -90.830937,13.991615 -90.830947,13.991684 -90.830957,13.991751 -90.830965,13.991806 -90.830970,13.991852 -90.830978,13.991898 -90.830987,13.991951 -90.830995,13.992004 -90.831004,13.992060 -90.831012,13.992112 -90.831019,13.992163 -90.831029,13.992218 -90.831039,13.992278 -90.831048,13.992334 -90.831055,13.992389 -90.831062,13.992444 -90.831069,13.992497 -90.831069,13.992500 -90.831099,13.992493 -90.831143,13.992483 -90.831190,13.992476 -90.831240,13.992471 -90.831285,13.992467 -90.831330,13.992463 -90.831381,13.992456 -90.831435,13.992449 -90.831488,13.992444 -90.831540,13.992437 -90.831594,13.992430 -90.831649,13.992424 -90.831703,13.992419 -90.831757,13.992414 -90.831811,13.992407 -90.831866,13.992400 -90.831919,13.992394 -90.831974,13.992387 -90.832032,13.992383 -90.832090,13.992379 -90.832146,13.992371 -90.832204,13.992362 -90.832274,13.992351 -90.832348,13.992340 -90.832412,13.992331 -90.832469,13.992325 -90.832522,13.992320 -90.832583,13.992314 -90.832647,13.992303 -90.832713,13.992295 -90.832779,13.992289 -90.832840,13.992283 -90.832901,13.992278 -90.832964,13.992270 -90.833029,13.992263 -90.833090,13.992253 -90.833153,13.992247 -90.833212,13.992241 -90.833260,13.992236 -90.833306,13.992230 -90.833360,13.992222 -90.833413,13.992215 -90.833461,13.992207 -90.833516,13.992196 -90.833569,13.992187 -90.833617,13.992180 -90.833627,13.992178 -90.833622,13.992147 -90.833615,13.992092 -90.833608,13.992034 -90.833602,13.991977 -90.833594,13.991919 -90.833587,13.991858 -90.833581,13.991796 -90.833571,13.991733 -90.833563,13.991667 -90.833555,13.991603 -90.833547,13.991541 -90.833541,13.991481 -90.833534,13.991419 -90.833526,13.991353 -90.833521,13.991285 -90.833515,13.991224 -90.833511,13.991169 -90.833506,13.991117 -90.833499,13.991066 -90.833492,13.991012 -90.833484,13.990955 -90.833474,13.990893 -90.833464,13.990830 -90.833455,13.990765 -90.833448,13.990702 -90.833440,13.990640 -90.833433,13.990578 -90.833424,13.990515 -90.833415,13.990452 -90.833406,13.990389 -90.833398,13.990328 -90.833388,13.990267 -90.833381,13.990213 -90.833375,13.990160 -90.833370,13.990108 -90.833362,13.990055 -90.833353,13.989994 -90.833347,13.989931 -90.833340,13.989868 -90.833332,13.989806 -90.833323,13.989743 -90.833315,13.989680 -90.833308,13.989618 -90.833302,13.989557 -90.833293,13.989500 -90.833286,13.989445 -90.833281,13.989393 -90.833275,13.989341 -90.833269,13.989288 -90.833261,13.989238 -90.833255,13.989190 -90.833249,13.989139 -90.833242,13.989087 -90.833233,13.989030 -90.833224,13.988969 -90.833218,13.988910 -90.833212,13.988854 -90.833205,13.988795 -90.833198,13.988734 -90.833191,13.988670 -90.833183,13.988604 -90.833173,13.988537 -90.833165,13.988471 -90.833162,13.988452 -90.832897,13.988475';
coordenadas4 = '-90.833577,13.992231 -90.833525,13.992241 -90.833470,13.992251 -90.833420,13.992260 -90.833367,13.992267 -90.833312,13.992275 -90.833266,13.992280 -90.833217,13.992286 -90.833158,13.992291 -90.833097,13.992298 -90.833035,13.992308 -90.832970,13.992315 -90.832906,13.992323 -90.832845,13.992328 -90.832783,13.992334 -90.832718,13.992339 -90.832654,13.992348 -90.832589,13.992358 -90.832527,13.992365 -90.832473,13.992370 -90.832418,13.992376 -90.832355,13.992385 -90.832281,13.992396 -90.832212,13.992406 -90.832153,13.992416 -90.832114,13.992421 -90.832217,13.993235 -90.832124,13.993315 -90.831292,13.993421 -90.831303,13.993471 -90.831313,13.993521 -90.831325,13.993573 -90.831338,13.993629 -90.831352,13.993686 -90.831365,13.993742 -90.831378,13.993797 -90.831393,13.993854 -90.831407,13.993911 -90.831420,13.993966 -90.831435,13.994022 -90.831451,13.994080 -90.831464,13.994137 -90.831477,13.994193 -90.831491,13.994249 -90.831506,13.994307 -90.831521,13.994366 -90.831534,13.994425 -90.831547,13.994481 -90.831558,13.994534 -90.831571,13.994588 -90.831585,13.994644 -90.831598,13.994700 -90.831611,13.994752 -90.831623,13.994804 -90.831635,13.994856 -90.831647,13.994905 -90.831659,13.994953 -90.831671,13.995002 -90.831683,13.995053 -90.831695,13.995105 -90.831707,13.995159 -90.831718,13.995212 -90.831730,13.995261 -90.831742,13.995311 -90.831751,13.995360 -90.831760,13.995409 -90.831769,13.995459 -90.831783,13.995508 -90.831796,13.995557 -90.831808,13.995607 -90.831819,13.995655 -90.831829,13.995700 -90.831839,13.995746 -90.831851,13.995798 -90.831865,13.995852 -90.831880,13.995907 -90.831895,13.995960 -90.831908,13.996007 -90.831921,13.996054 -90.831929,13.996100 -90.831939,13.996144 -90.831951,13.996189 -90.831964,13.996235 -90.831974,13.996279 -90.832004,13.996404 -90.832165,13.996402 -90.832508,13.996369 -90.832749,13.996335 -90.832879,13.996318 -90.833536,13.996234 -90.833694,13.996217 -90.833722,13.996208 -90.834097,13.996166 -90.834103,13.996011 -90.834100,13.995977 -90.834095,13.995929 -90.834088,13.995877 -90.834082,13.995825 -90.834076,13.995775 -90.834070,13.995723 -90.834064,13.995669 -90.834059,13.995614 -90.834054,13.995558 -90.834046,13.995500 -90.834040,13.995447 -90.834035,13.995395 -90.834028,13.995342 -90.834021,13.995286 -90.834015,13.995228 -90.834006,13.995168 -90.833999,13.995117 -90.833990,13.995067 -90.833982,13.995009 -90.833973,13.994946 -90.833964,13.994883 -90.833955,13.994816 -90.833947,13.994747 -90.833938,13.994676 -90.833932,13.994613 -90.833925,13.994553 -90.833919,13.994498 -90.833913,13.994445 -90.833905,13.994388 -90.833897,13.994328 -90.833890,13.994268 -90.833884,13.994212 -90.833878,13.994156 -90.833872,13.994100 -90.833864,13.994044 -90.833856,13.993988 -90.833848,13.993933 -90.833841,13.993876 -90.833835,13.993821 -90.833830,13.993764 -90.833824,13.993705 -90.833818,13.993645 -90.833811,13.993584 -90.833803,13.993523 -90.833797,13.993467 -90.833791,13.993416 -90.833784,13.993363 -90.833778,13.993309 -90.833769,13.993258 -90.833761,13.993208 -90.833753,13.993155 -90.833746,13.993097 -90.833740,13.993037 -90.833733,13.992976 -90.833726,13.992918 -90.833718,13.992862 -90.833709,13.992801 -90.833699,13.992736 -90.833690,13.992667 -90.833681,13.992596 -90.833674,13.992522 -90.833666,13.992450 -90.833658,13.992376 -90.833648,13.992307 -90.833638,13.992249 -90.833634,13.992223 -90.833577,13.992231';
cc1 = "2740301";
cc2 = "2740306";
cc3 = "2740304";
cc4 = "2740302";
crearPoligonos(coordenadas3, cc3);
crearPoligonos(coordenadas4, cc4);
crearPoligonos(coordenadas1, cc1);
crearPoligonos(coordenadas2, cc2);
}
//finaliza generar mapas----------------------------
$(document).ready(function() {
generarMapas();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/1.5.0/jsts.js"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet" />
<div id="map">
</div>
<div id="popup">
</div>
info@software-testing.com