Ошибка масштабируемости карты Leaflet на React

@ЧереТТ · Регистрация: 13.04.2018

Студворк — интернет-сервис помощи студентам

Товарищ, хочу поведать о своей проблеме

Решил я значит сделать карту на Leaflet и React, а она и не работает, точнее криво-косо. Для начала просто вставил пример с офф сайта.(Первая картинка)

Код где находиться пример карты. Для удобства Вторая и Третья картинка

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
require(__dirname + '/../css/map.scss')
import React, { Component } from 'react'
//import ReactDOM from "react-dom";
import {Map, Marker,LeafletMap, Popup, TileLayer} from "react-leaflet";
 
 
 class SimpleExample extends React.Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  } 
  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map className="map-container" center={position} zoom={this.state.zoom}>
        <TileLayer
         
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    )
  }
}
export default SimpleExample

Код где рендериться

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require(__dirname + '/../css/index.scss')
 
import React from 'react';
import ReactDOM from "react-dom";
 
 
const Content = require('./content')
import SimpleExample from "../app/map";
 
const App = () => (
    <div>
        <SimpleExample />
    </div>
)
ReactDOM.render( <App />, document.getElementById('root'))

Делаю это всё с webpack (Последняя Картинка)

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var path = require('path');
var BabiliPlugin = require('babili-webpack-plugin')
module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
 
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loaders: ['babel-loader']
      },
      { test: /\.(scss|css)$/, use: ['style-loader','css-loader','sass-loader']   },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=100000' },
      { test: /\.html$/, use: 'html-loader' },
    ]
  }
};

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
{
  "name": "Maps",
  "version": "1.1.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "dev": "webpack --watch --mode development",
    "build": "webpack --watch --mode production "
  },
  "babel": {
    "presets": [
      "react"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC ",
  "dependencies": {
    "axios": "0.16.2",
    "dotenv": "5.0.1",
    "file-loader": "^1.1.6",
    "fs": "0.0.1-security",
    "fuse.js": "3.0.5",
    "http-server": "^0.11.1",
    "ioredis": "3.1.4",
    "joi": "10.6.0",
    "kcors": "2.2.1",
    "koa": "2.3.0",
    "koa-joi-validate": "0.5.1",
    "koa-router": "7.2.1",
    "leaflet": "^1.3.1",
    "pg": "7.2.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-leaflet": "^1.9.1",
    "webpack-cli": "^2.1.5",
    "winston": "2.3.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-react": "^6.24.1",
    "babili-webpack-plugin": "0.1.2",
    "css-loader": "0.28.5",
    "eslint": "4.5.0",
    "eslint-config-standard": "10.2.1",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.1.1",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "html-loader": "0.5.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "url-loader": "0.5.9",
    "webpack": "4.0.1"
  }
}

Примечание: хоть css и подключён, но файлы все пусты

Пробовал по разному добавлять к подключённым стили (работало так же криво) и пробовал вставлять в Index.html(через href=... не рендерилось вообще

Подскажите в чём проблема. И как я понял пример с офф сайта работает ведь совсем без стилей они берутся из скачаного и подключённого модуля. Пробовал заново создавать - результат null

@ЧереТТ · 01.07.2018, 23:58 **[ТС]**

Как говориться сам сломал сам и починил) Хотя это не совсем так.
Искав в интерЪнете нашёл одну единственную статейку(было без модулей,webpack) и то было мельком написано что без css будет криво работать как у меня на первой картинке.
Но меня это не устраивало и было понятно ежу что что то не так с самим модулем(самое главное со стилями). Тогда в сотый раз я решил посмотреть официальный пример с github(a) и скопировать настройки webpack. И вы не поверите но с бубоном всё заработало, но не до конца.

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
webpack = require('webpack');
path = require('path');
 
webpackConfig = {
    context: __dirname,
    entry: './app/index.js',
    output: {
         path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
    },
    devtool: '#cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/],
                loader: "babel-loader",
                query: {
                    presets: ['es2015', 'react', 'stage-0', 'stage-1']
                }
            },
            { test: /\.(scss|css)$/, use: ['style-loader','css-loader','sass-loader']   },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
                loader: 'file-loader'
            }
        ]
    },
   
};
module.exports = webpackConfig;

Так же в Index.html вставил стили(в этот раз заработало)

Кликните здесь для просмотра всего текста

HTML5
1
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>

PS И вот прямо перед отправкой я решил посмотреть ещё раз... И конечно убрались некоторые баги или ошибки связанные со стилями , в index.html

Кликните здесь для просмотра всего текста

HTML5
1
2
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

Ошибки или баги которые остались:
Это конечно же иконки (тот же маркер - его попросту нетЪ), некоторые стили вообще криво переопределяются и ещё другие

Может это модуль кривой, а может я что то не так сделал

Если кому надо пишите готовый проект
(было бы интересно узнать как у вас настроено)

Добавлено через 11 минут
А и package по другому настроил

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
  "name": "clear-sky",
  "version": "9.9.9",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --watch --mode development",
    "build": "webpack --watch --mode production ",
    "server": "http-server ./public"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "leaflet": "^1.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "http-server": "^0.11.1",
    "leaflet": "^1.3.1",
    "node-sass": "^4.9.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-leaflet": "^1.9.1",
    "react-leaflet-control": "^1.4.1",
    "resolve-url-loader": "^2.3.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {}
}

Всё модули через --save-dev устанавливал, а
"peerDependencies": {
"leaflet": "^1.3.0"
},
Отдельно глобально

@Evgen1337 · 02.07.2018, 14:56

v1.
https://codepen.io/PaulLeCam/pen/XVPmmj

v2.
https://codepen.io/PaulLeCam/pen/gzVmGw

взял тут:
https://react-leaflet.js.org/

может быть у тебя версии не сходятся?

@ЧереТТ · 02.07.2018, 15:05 **[ТС]**

Evgen1337, в том то и дело что пробовал по разному и так, и так, почти весь сайт наизусть выучил)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	02.07.2018, 14:56
	v1. https://codepen.io/PaulLeCam/pen/XVPmmj v2. https://codepen.io/PaulLeCam/pen/gzVmGw взял тут: https://react-leaflet.js.org/ может быть у тебя версии не сходятся? 0

@ЧереТТ 0 / 0 / 1 Регистрация: 13.04.2018 Сообщений: 10
	02.07.2018, 15:05 [ТС]
	Evgen1337, в том то и дело что пробовал по разному и так, и так, почти весь сайт наизусть выучил) 0

Ошибка масштабируемости карты Leaflet на React

Решение