Definitelytyped: Property 'Map' does not exist on type 'typeof L'. (And more errors)

[aderbas]

• [x] I tried using the latest leaflet/leaflet.d.ts file in this repo and had problems.
• [x] I want to talk about leaflet/leaflet.d.ts.
  
  
  
  • The authors of that type definition are cc/ @alejo90
  
  

I updated the typings of Leaflet from 1.0.31 to 1.0.34 and get many errors in my project

ERROR in [default] sample-app/src/app/components/common/maputil/polyline.layer.ts:24:23 
Cannot find name 'Polyline'.

ERROR in [default] sample-app/src/app/components/common/maputil/polyline.layer.ts:53:21 
Property 'geoJson' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/components/views/fence/fence.component.ts:3:17 
Module ''leaflet'' has no exported member 'LeafletMouseEvent'.

ERROR in [default] sample-app/src/app/components/views/replay/replay.component.ts:173:24 
Cannot find name 'LatLng'.

ERROR in [default] sample-app/src/app/entity/point.ts:10:24 
Cannot find name 'LatLng'.

ERROR in [default] sample-app/src/app/services/geocode.service.ts:42:34 
Cannot find name 'LatLngBounds'.

ERROR in [default] sample-app/src/app/services/map.service.ts:12:33 
Property 'TileLayer' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/services/map.service.ts:15:24 
Property 'TileLayer' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/services/map.service.ts:18:27 
Property 'TileLayer' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/services/map.service.ts:21:27 
Property 'TileLayer' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/services/map.service.ts:36:24 
Property 'Map' does not exist on type 'typeof L'.

ERROR in [default] sample-app/src/app/services/map.service.ts:38:24 
Property 'LatLng' does not exist on type 'typeof L'.

Using typescript: 2.0.0
Need any more information to try to help me?

[alejo90]

I can't really tell what's wrong from the provided information. How are you importing stuff? Also take into account that this typing is not 100% conpatible with the one you were using, since this one targets leaflet 1.0.0 and the other one was targetting 0.7.x. I can tell you for sure that in the new typing LeafletMouseEvent is called just MouseEvent.

[aderbas]

I'm using angular-cli the import is in the configuration file tsconfig.json

"typeRoots": [
      "../node_modules/@types"
 ]

It's working perfectly until I upgrade to 1.0.1 leaflet and typings to 1.0.34, I get errors =/

[sosnet]

Same here. I'm on [email protected] and @types/[email protected].

Property 'LatLng' does not exist on type 'typeof L'.

In addition I was also not able to add custom keys to the url-template:
L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

I'm importing leaflet via import 'leaflet';

For both problems I have workarounds as I can use [lat,lng] instead of LatLng-class and I can add the keys manually to the url, but it would be nice, if I could at least follow the leaflet-tutorial in all steps as I'm new to leaflet and ionic2/angular2.

[sosnet]

Ok, I could at least solve the problem with LatLng.
It's written with a small L at the beginning:
let newLatLng = L.latLng(lat, lng);

[alejo90]

Thanks for the report @sosnet. I just pushed #11963 to allow custom keys on TileLayer options.

[aderbas]

Any idea how to make a custom marker? Like Javascript:

customMarker = L.Marker.extend({
   options: { 
      someCustomProperty: 'Custom data!'
   }
});

I try extend Marker but I did not succeed.

export class CustomMarker extends [or implements] Marker{
...
}

[alejo90]

I haven't implemented the custom Leaflet inheritance stuff, so for now L.Marker.extend won't work. You could do it like this: (L.Marker as any).extend({}). As for using class and extends, it would have to be export class CustomMarker implements L.Marker but I don't think that's going to work.

[aderbas]

In class gives bad because the Typescript tells me to implement all the methods of the interface =/

[alejo90]

Well, yes, that's how interfaces work. It has to be declared as an interface because it 's a typing definition, but under the hood it's a "class", so you need the (L.Marker as any).extend({}) approach to create a custom marker.

[StewartBellamy]

I'm using leaflet 1.0.1 with with Type definitions for Leaflet.js 1.0.0-rc3 and Leaflet draw 0.4.0 which I think is the version to go with leaflet 1.0.1. The latest leaflet-draw.d.ts I can get hold of says it is for leaflet-draw 0.2.4 which references leaflet-0.7.d.ts.

Is there a leaflet-draw.d.ts that is compatible with leaflet draw 0.4.0 and that references the latest leaflet.d.ts?

I switched the leaflet-draw.d.ts to reference the latest leaflet.d.ts but I can't get it to work. There appears be no draw control in the L.control namespace.

Oh, I'm new to typescript & leaflet, so please be gentle.

Thanks

[alejo90]

Hi, @StewartBellamy, at the moment there is no type definition for leaflet draw 0.4.0. A new one has to be written. If you need it right away and you're using typescript 1.8.x, you could create a stub:

In a file called leaflet-draw.d.ts

declare module 'leaflet-draw' {}

In the file you need it, assuming leaflet-draw.d.ts is a sibling:

/// <reference path="./leaflet-draw.d.ts" />

import "leaflet-draw";

// to use it

const DrawControl = (L as any).Control.Draw;
new DrawControl(...);

[kotwalpuran]

I am using leaflet version 1.1.0 along with leaflet markercluster 1.0.6. Everything works perfect. ( Type version present for both ).

Now i am trying to create real time map using leaflet-realtime 2.1.0. There is no type script version for same. Can any one please help me out there?