yaph / d3-geomap

A library for creating geographical maps based on D3.js
https://d3-geomap.github.io/
MIT License
132 stars 45 forks source link

Getting Error when trying to draw map: geomap.properties.projection is not a function #33

Closed zreitano closed 9 years ago

zreitano commented 9 years ago

I am trying to draw the map (with no data) and I am receiving two errors.

  1. Unexpected token ILLEGAL (in D3 dependencies — not too worried about this)
  2. geomap.properties.projection is not a function. When I click on error in Chrome dev tools): Geomap.draw @ d3.geomap.js:444 _a.call @ d3.v3.min.js:3 (anonymous function) @ app.js:5

I am using the code from: http://d3-geomap.github.io/ just trying to get the basics.

Here is the repository: https://github.com/zreitano/h_campaign

This is my app.js file

var map = d3.geomap()
    .geofile('d3-geomap/topojson/countries/USA.json');

d3.select('#map')
    .call(map.draw, map);

This is my index.html file

<!DOCTYPE html>

<html >

    <head>
        <title>H Campaign</title>

        <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" type="text/css" href="styles/usa.css">

      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
      <!-- D3 Styling -->
      <link rel="stylesheet" href="d3-geomap/css/d3.geomap.css">
    </head>

    <body>

      <div class="container">
        <h1>Header</h1>
      </div>

      <div id="map">
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <!-- D3 with geomap -->
      <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
      <script type="text/javascript" src="d3-geomap/js/d3.geomap.js"></script>
      <!-- My JS -->
      <script type="text/javascript" src="js/app.js"></script>

    </body>
</html>

Please let me know if I can help with any more information.

yaph commented 9 years ago

As stated in https://github.com/zreitano/h_campaign/pull/1 the charset needs to be set in the HTML. I also updated the documentation, as this is likely to happen to others too.