City Map

HTML

<!DOCTYPE html>
<html>
<body>

<svg id="mySvg" width="300" height="300">
  <g transform="scale(5)"></g>
  Sorry, your browser does not support inline SVG.
</svg>

<div id="era">
  Edad: 
  <select>
    <option value="BronzeAge">BronzeAge</option>
    <option value="IronAge">IronAge</option>
    <option value="EarlyMiddleAge">EarlyMiddleAge</option>
    <option value="HighMiddleAge">HighMiddleAge</option>
    <option value="LateMiddleAge">LateMiddleAge</option>
    <option value="ColonialAge">ColonialAge</option>
    <option value="IndustrialAge">IndustrialAge</option>
    <option value="ProgressiveEra">ProgressiveEra</option>
    <option value="ModernEra">ModernEra</option>
    <option value="PostModernEra">PostModernEra</option>
    <option value="ContemporaryEra">ContemporaryEra</option>
    <option value="TomorrowEra">TomorrowEra</option>
    <option value="FutureEra">FutureEra</option>
    <option value="ArcticFuture">ArcticFuture</option>
    <option value="OceanicFuture">OceanicFuture</option>
  </select>
</div>
<div id="filtros">
  <input type="checkbox" id="street">Calles<br>
  <input type="checkbox" id="decoration">Decoraciones<br>
  <input type="checkbox" id="tower">Torres<br>
  <input type="checkbox" id="goods">Bienes<br>
  <input type="checkbox" id="production">Producciones<br>
  <input type="checkbox" id="residential">Residenciales<br>
  <input type="checkbox" id="greatbuilding">Grandes Edificios<br>
  <input type="checkbox" id="culture">Culturales<br>
  <input type="checkbox" id="military">Militares<br>
</div>  


<div id="info">
  Nombre: <span id="nombre"></span><br />
  Tipo: <span id="tipo"></span>
</div>

</body>
</html>

CSS

rect:hover{
  opacity: 0.5;
  stroke: black;
  stroke-width: 0;
}

.resaltado {
  fill: #000000 !important;
  stroke-width: 1;
}

.street {
  fill: #AA3000;
}

.production {
  fill: #AA6000;
}

.residential {
  fill: #AA9000;
}

.greatbuilding {
  fill: #AAC000;
}

#filtros, #era {
  float: right;
}

JavaScript

var miArray = [["Ayuntamiento", "main_building", 8, 8, 7, 6], ["Árbol", "decoration", 23, 17, 1, 1], ["Árbol", "decoration", 23, 32, 1, 1], ["Árbol", "decoration", 23, 12, 1, 1], ["Guarida del tigre", "tower", 16, 19, 3, 3], ["Sendero", "street", 17, 15, 1, 1], ["Sendero", "street", 14, 22, 1, 1], ["Gran puente - Nv. 2", "residential", 14, 8, 4, 3], ["Casa de vigas", "residential", 11, 20, 2, 2], ["Sendero", "street", 20, 12, 1, 1], ["Sendero", "street", 21, 12, 1, 1], ["Sendero", "street", 22, 12, 1, 1], ["Sendero", "street", 19, 19, 1, 1], ["Sendero", "street", 19, 20, 1, 1], ["Sendero", "street", 19, 11, 1, 1], ["Sendero", "street", 19, 12, 1, 1], ["Sendero", "street", 19, 13, 1, 1], ["Sendero", "street", 19, 14, 1, 1], ["Sendero", "street", 19, 15, 1, 1], ["Sendero", "street", 12, 15, 1, 1], ["Sendero", "street", 13, 15, 1, 1], ["Sendero", "street", 14, 15, 1, 1], ["Sendero", "street", 15, 15, 1, 1], ["Sendero", "street", 16, 15, 1, 1], ["Sendero", "street", 18, 15, 1, 1], ["Sendero", "street", 19, 16, 1, 1], ["Sendero", "street", 19, 17, 1, 1], ["Sendero", "street", 19, 18, 1, 1], ["Sendero", "street", 13, 22, 1, 1], ["Bandera", "decoration", 23, 15, 1, 1], ["Campo para petrobolos", "military", 17, 8, 3, 3], ["Sendero", "street", 19, 32, 1, 1], ["Barracones para soldados", "military", 22, 23, 3, 2], ["Casa Comunal", "residential", 17, 23, 4, 2], ["Alquimista", "production", 11, 23, 3, 2], ["Monumento", "decoration", 20, 8, 2, 2], ["Monumento", "decoration", 22, 18, 2, 2], ["Monumento", "decoration", 22, 8, 2, 2], ["Barracones para soldados", "military", 22, 26, 3, 2], ["Oasis", "residential", 15, 16, 3, 4], ["Alquimista", "production", 13, 23, 3, 2], ["Barracones para lanceros", "military", 12, 16, 3, 3], ["Sendero", "street", 19, 21, 1, 1], ["Casa de campo", "residential", 8, 22, 2, 2], ["Casa de vigas", "residential", 17, 11, 2, 2], ["Sendero", "street", 15, 22, 1, 1], ["Casa de campo", "residential", 8, 26, 2, 2], ["Estatua de Zeus", "greatbuilding", 11,...