Estoy tratando de mostrar un mapa de Francia basado en el complemento Datamaps . con todos los intentos que intenté no pude tener éxito.
Este es mi HTML:
<div id="container"></div>Este es mi js:
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> <script src="../../../node_modules/datamaps/dist/datamaps.fra.min.js"></script> <script> var map = new Datamap({ element: document.getElementById('container'), geographyConfig: { dataUrl: null, //dataUrl: "../../assets/script/fra.topo.json", popupOnHover: true, highlightOnHover: true, borderColor: '#444', borderWidth: 0.5, }, scope: 'fra', fills: { 'MAJOR': '#306596', 'MEDIUM': '#0fa0fa', 'MINOR': '#bada55', defaultFill: '#dddddd' }, setProjection: function (element) { var projection = d3.geo.mercator() .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude] .scale(1000); var path = d3.geo.path().projection(projection); return { path: path, projection: projection }; } }); </script>Cuando revisé la página y la inspeccioné, vi un svg donde la página está vacía (Imagen a continuación) ingrese la descripción de la imagen aquí
Parece que está configurando el centro del mapa en el lugar equivocado ya que solo está utilizando datos de FRA (Francia). El centro debe ser aproximadamente 2, 46, no 78,9629, 23,5937. El primer valor es la longitud y luego la latitud.
var projection = d3.geo.mercator() .center([2.0, 46.0]) .scale(1000);