function map(){

    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 8])
        .on("zoom", move);

    var mapDiv = $("#map");

    var margin = {top: 20, right: 20, bottom: 20, left: 20},
        width = mapDiv.width() - margin.right - margin.left,
        height = mapDiv.height() - margin.top - margin.bottom;

    //initialize color scale
    //...
    //var c20 = d3.scale.category20c();

    //initialize tooltip
    //...

    var projection = d3.geo.mercator()
        .center([8.25, 56.8 ])
        .scale(700);

    var svg = d3.select("#map").append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(zoom);

    var path = d3.geo.path()
        .projection(projection);

    g = svg.append("g");

    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
          //console.log("här");
        return "<strong>Country:</strong> <span style='color:red'>" + d.country + "</span>";
      })


    // load data and draw the map
    d3.json("data/world-topo.json", function(error, world) {
        var countries = topojson.feature(world, world.objects.countries).features;

        //load summary data
        //...
        d3.csv("data/Earthquakes_Europe-1901-1983.csv", function(data) {

            self.data = data;



        draw(countries, self.data);

        });

    });


    svg.call(tip);
    function draw(countries, data)
    {

        var country = g.selectAll(".country").data(countries);      //G = grafiskt element som byggs på (?)
        country.enter().insert("path")
            .attr("class", "country")
            .attr("d", path)
            .attr("id", function(d) { return d.id; })
            .attr("title", function(d) { return d.properties.name; })

            .style('stroke-width', 1)
            .style("fill",  function(d) { return d3.rgb(128, 152, 230);})
            .style("stroke", "white")
            //tooltip
            .on("mousemove", function(d) {
               d3.select(this)
               .style("fill",  function(d) { return d3.rgb(61, 97, 215);})
            })
            .on("mouseout",  function(d) {
                d3.select(this)
               .style("fill",  function(d) { return d3.rgb(128, 152, 230);})
            })
            //selection
            .on("click",  function(d) {
                //...
                //selFeature(d);
            }

            );

            data.forEach(function (point) {
                d3.select("#nRadius").on("input", function() {
                    update(+this.value, point);
                });

                update(8, point);
            });
    }

    function addpoint(point) {



    }

    function update(min_intensity, point) {

        var gpoint = g.append("g").attr("class", "gpoint");

        var x = projection([point.x, point.y])[0];

        var y = projection([point.x, point.y])[1];

      // adjust the text on the range slider
        d3.select("#nRadius-value").text(min_intensity);
        d3.select("#nRadius").property("value", min_intensity);

        //console.log(point)

        if(point.intensity >= min_intensity){
            gpoint.append("svg:circle")
                .attr("cx", x)
                .attr("cy", y)
                .attr("class", "point")
                .style("fill", d3.rgb(150,0,0))
                .attr("r", point.intensity * 0.2)
                .style("opacity", point.intensity * 0.1)
                //.append("svg:title").text(function(d) {return "Country: " + d.country;})
                //bootstrap columns
                .on("mousemove", function(d) {
                   d3.select(this)
                    .style("stroke",  function(d) { return d3.rgb(255, 255, 0);})
                    .style("stroke-width",  function(d) { return 0.5});
                })
                .on("mouseout",  function(d) {
                    d3.select(this)
                   .style("stroke-width",  function(d) { return 0});
                })
            //selection
                .on("click",  function(d, i) {
                    //...
                    d3.selectAll(".point").style("fill",  function(d) { return d3.rgb(150, 0, 0);})
                        .style("opacity", 0.3);

                    d3.select(this)
                    .style("fill",  function(d) { return d3.rgb(255,255, 0);})
                    .style("opacity", 1.0);

                    selFeature(point);
                })
        }

    }

    //zoom and panning method
    function move() {

        var t = d3.event.translate;
        var s = d3.event.scale;

        zoom.translate(t);
        g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");

    }

    //method for selecting features of other components
    function selFeature(value){
        //...
        //sp1.selectDot(value.properties["name"]);
        //pc1.selectLine(value);
        d3.select("#sp").selectAll('.dot').style("stroke", function(d){
             return d["country"]==value? "red" : 'black' ;
         })
         //console.log(value)
         elem = document.getElementById('info');
            elem.innerHTML = "Place: " + value["place"] + "<br> Country: " + value["country"] + "<br> Magnitude: "
             + value["magnitude"] + "<br> Intensity: " + value["intensity"];

    }
}