markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Bower World File Doesn't Load Map #107

Closed jasonhargrove closed 10 years ago

jasonhargrove commented 10 years ago

Installed datamaps via bower and loaded up the files as described in your "getting started" example; the map object is created but the visuals do not load.

Loading it using the world file downloaded from your site landing page works as expected.

markmarkoh commented 10 years ago

How are you referencing the bower file? I just tired this and it works as expected.

I did a bower install datamaps

Then created a file called index.html with the following contents:

<!DOCTYPE html>
<html>
<head>
  <style>
    .active { fill: blue !important;}
          /*.datamaps-key dt, .datamaps-key dd {float: none !important;}
          .datamaps-key {right: -50px; top: 0;}*/
        </style>
      </head>
      <body>

        <div id="container1" style="border:1px dotted blue; width: 700px; height: 475px; position: relative;"></div>
        <script src="/bower_components/datamaps/src/js/components/d3/d3.min.js"></script>
        <script src="/bower_components/datamaps/src/js/components/topojson/topojson.js"></script>
        <!-- <script src="/src/js/json2.js"></script> -->
        <script src="/bower_components/datamaps/dist/datamaps.world.js"></script>
        <script>

          var election = new Datamap({
            scope: 'world',
            element: document.getElementById('container1'),
            geographyConfig: {
              popupOnHover: false,
              highlightOnHover: false,
              borderColor: '#444',
              borderWidth: 0.5
            },
            data: {
              USA: {
                fillKey: 'neato'
              }
            },
            fills: {
              'Visited': '#306596',
              'neato': '#0fa0fa',
              'Trouble': '#bada55',
              defaultFill: '#dddddd'
            }
          });
</script>
</body>
</html>

And everything runs correctly. Could it be a src attribute issue you are having?

markmarkoh commented 10 years ago

Double check you are referencing a file in the dist directory and not the src/js/datamaps.js file, which is unbuilt (contains no GeoJSON).

markmarkoh commented 10 years ago

Closing until I can get some more info

BrianMitchL commented 9 years ago

This could have been related to #113 It's been almost a year now though, so who knows :stuck_out_tongue_closed_eyes: